왜 overflow-y: auto 한쪽만 스크롤을 주면 안될까?

 

CSS로 스크롤 가능한 영역을 만들 때, 많은 개발자들이 overflow-y: auto만 사용하고 끝내는 경우가 많습니다. 하지만 이렇게 하면 예상치 못한 레이아웃 문제가 발생할 수 있습니다. 특히 윈도우 환경에서 가로 스크롤바가 의도치 않게 나타나는 현상을 경험해보셨을 것입니다.
이 글에서는 CSS 스펙을 바탕으로 이 문제가 왜 발생하는지, 그리고 어떻게 해결해야 하는지 자세히 알아보겠습니다.

문제 상황: overflow-y: auto만 사용했을 때

 

css

.scroll-container {
  overflow-y: auto;
  /* overflow-x는 명시하지 않음 (기본값: visible) */
}

이렇게 코드를 작성하면 다음과 같은 문제가 발생합니다:

• 세로 스크롤은 정상적으로 작동하지만
• 가로 스크롤바가 의도치 않게 나타남
• 특히 윈도우 환경에서 세로 스크롤바 너비만큼 가로 스크롤바가 생성됨

원인 분석: CSS 스펙의 숨겨진 규칙

CSS 스펙의 핵심 규칙

이 문제의 원인은 CSS 스펙에 명시된 다음 규칙 때문입니다:

"Setting overflow to visible in one direction (i.e., overflow-x or overflow-y) when it isn't set to visible or clip in the other direction results in the visible value behaving as auto."

즉, 한 방향의 overflow가 visible이 아닌 값(auto, hidden, scroll 등)으로 설정되어 있으면, 다른 방향의 overflow가 visible일 때 자동으로 auto로 계산됩니다.

실제 동작 과정

1. 개발자가 작성한 코드:
    

   css

   .container {
     overflow-y: auto;
     /* overflow-x: visible (기본값) */
   }

2. 브라우저의 실제 계산 값:
    

   css

   .container {
     overflow-y: auto;
     overflow-x: auto; /* visible → auto로 자동 변환 */
   }

크로스 브라우징 환경에서, 윈도우 환경일 때 의도치 않은 이슈 발생 가능

1. 명시적으로 overflow-x: auto를 주면
 

.my-box { overflow-y: auto; overflow-x: auto; } // 또는 그냥 overflow: auto

 

• 브라우저는 X축도 스크롤 컨테이너로 취급
• 레이아웃 엔진이 X축을 스크롤 가능한 영역으로 미리 레이아웃을 잡음
• X축에서 넘침이 생겨야 스크롤바가 생기는데, 스크롤 컨텍스트 안에서 내용이 클리핑되거나 레이아웃이 재조정됨
• 결과적으로 X 스크롤바가 생기지 않음 (넘침을 해결했기 때문)

2. 명시하지 않고 overflow-y: auto만 있을 때
 

.my-box { overflow-y: auto; /* overflow-x는 visible (기본값) */ }​

 

• CSS2.1 유산 + 크롬의 암묵 auto 처리로 인해 X축을 스크롤 컨텍스트처럼 취급
• 그런데 이 경우 윈도우 환경에서 X축은 스크롤 컨테이너가 아니기 때문에 넘침 내용이 부모 영역을 벗어나고, 브라우저는 넘침을 방지하기 위해 X 스크롤바를 렌더링 (auto처럼).

즉, 레이아웃 엔진이 X축을 visible이라고 보고 레이아웃을 계산한 뒤, 넘쳤으니 스크롤바를 추가하는 보정 동작을 해서 스크롤바 너비가 가로 스크롤에 포함 -> 의도치 않은 스크롤이 생기는 버그가 생길 수 있습니다.

해결 방법: 명시적 overflow-x 선언

방법 1: overflow-x를 명시적으로 auto로 설정

 

css

.scroll-container {
  overflow-y: auto;
  overflow-x: auto;
}

이렇게 하면 브라우저가 양방향 모두를 스크롤 컨테이너로 인식하여 레이아웃을 일관되게 계산합니다.

방법 2: overflow-x를 hidden으로 설정

 

css

.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
}

가로 스크롤이 필요없다면 이 방법이 더 적절할 수 있습니다.

방법 3: overflow 단축 속성 사용

 

css

.scroll-container {
  overflow: auto; /* 양방향 모두 auto */
}

/* 또는 */
.scroll-container {
  overflow: hidden auto; /* x: hidden, y: auto */
}

브라우저별 동작 차이

윈도우 환경의 특수성

윈도우 환경에서는 스크롤바가 실제 공간을 차지하기 때문에 이 문제가 더 두드러집니다:

• macOS: 스크롤바가 오버레이 형태로 표시되어 레이아웃에 영향을 주지 않음
• 윈도우: 스크롤바가 실제 공간을 차지하여 레이아웃 계산에 포함됨

브라우저 구현의 일관성

모든 주요 브라우저(Chrome, Firefox, Safari, Edge)가 CSS 스펙을 동일하게 구현하고 있어, 이 문제는 모든 브라우저에서 일관되게 발생합니다.

실제 예제로 확인하기

다음 예제를 통해 차이점을 확인할 수 있습니다:

 

css

/* 문제가 있는 코드 */
.bad-container {
  width: 300px;
  height: 200px;
  overflow-y: auto;
  /* overflow-x는 visible → auto로 자동 변환됨 */
}

/* 올바른 코드 */
.good-container {
  width: 300px;
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden; /* 명시적으로 선언 */
}

 

베스트 프랙티스

1. 항상 양방향 overflow를 명시적으로 선언하세요
    

   css

   .container {
     overflow-y: auto;
     overflow-x: hidden; /* 명시적 선언 */
   }

2. overflow 단축 속성을 활용하세요
    

   css

   .container {
     overflow: hidden auto; /* x: hidden, y: auto */
   }

3. 브라우저 개발자 도구로 계산된 값을 확인하세요
   • Elements 탭에서 Computed 스타일을 확인
   • overflow-x, overflow-y의 실제 계산 값 점검

결론

overflow-y: auto만 사용하는 것은 CSS 스펙의 자동 변환 규칙으로 인해 예상치 못한 레이아웃 문제를 야기할 수 있습니다. 이 문제를 해결하려면:

1. CSS 스펙을 이해하고 - visible과 다른 값이 함께 사용될 때의 자동 변환 규칙
2. 명시적으로 선언하고 - overflow-x를 명시적으로 설정
3. 브라우저별 차이를 고려하세요 - 특히 윈도우 환경의 스크롤바 동작

이러한 원칙을 지키면 모든 브라우저와 운영체제에서 일관된 스크롤 동작을 구현할 수 있습니다.