[CSS] overflow-y : auto 와 overflow-x : visible 같이 써야할 때

1.  배경 설명

위와 같이 사이드바가 있다고 가정해보자.

사이드바 전체 영역에 overflow-y:auto 가 걸려있고

그 안에 메뉴 영역에 마우스를 올렸을 때 툴팁이 띄워지는 구조를 만들 때 아래와 같은 스타일 문제(?)를 마주칠 수 있다.

 

툴팁이 overflow-x : auto의 영향을 받는 문제

 

 사이드바 전체 영역의 overflow-y:auto로 인해 툴팁이 가려지게된다.

이 때 overflow-y:auto 와 overflow-x:visible을 같이 쓰려고 하지만 W3C 공식 문서에 보면 둘은 같이 적용할 수 없게된다.

한쪽이 auto or scroll일 경우 나머지 한쪽이 visible을 하면 visible -> auto 로 취급된다.

 

2. 해결 방안

• 기존의 사이드바 영역을 초록색 div로 한번 더 감싼다. (즉, 사이드에 parent div를 추가)
• 기존에 빨간색 div에 있던 overflow-y:auto를 초록색 div(parent div)로 스타일을 추가해준다.
• 툴팁이 뜰 때 마다 초록색 div(parent div)에 padding-right를 줘서 x축 영역을 넓힌다.

위 방법 말고 다른 방법도 있을 수 있지만 해당 방법도 꽤 유용하다.

코드로 보는게 더 확실한 방법일 수 있으니 코드와 구현 된 예제를 첨부하였다.

구현 예제 사이트