overflow에 visible을 사용했는데 스크롤이 생기는 이슈

문제 상황

overflow-x, overflow-y를 이용하여 x 와 y에 각각 속성을 주었을 때, visible을 사용했음에도 x 혹은 y에 스크롤이 생기는 현상이 발생한다.

원인

visible과 visible이 아닌 다른 속성(hidden, auto, scroll)을 함께 사용할 경우에 visible인 쪽이 auto가 된다. 해당 내용은 W3C의 공식 스펙에도 기재되어있다.

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

참고 링크

• overflow-x, overflow-y tests
• W3C Overflow spec