AAtomic CSS

overflow-x

수평(가로) 방향의 오버플로우만 제어합니다. 가로 스크롤 가능한 컨테이너(캐러셀, 넓은 테이블)에 자주 사용됩니다.

클래스 목록

클래스CSS설명
oxvoverflow-x: visible기본값. 넘치는 콘텐츠가 그대로 보임
oxhoverflow-x: hidden넘치는 콘텐츠를 잘라서 숨김
oxsoverflow-x: scroll항상 가로 스크롤바 표시
oxaoverflow-x: auto넘칠 때만 가로 스크롤바 표시
oxcoverflow-x: clip숨기되 스크롤 영역도 생성하지 않음

시각적 비교

넓은 콘텐츠가 컨테이너를 초과할 때 각 값의 동작을 비교합니다.

Visible — oxv

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

콘텐츠가 컨테이너 밖으로 넘침

Hidden — oxh

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

넘치는 부분이 잘려서 보이지 않음

Auto — oxa

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

넘칠 때만 가로 스크롤바가 나타남

Scroll — oxs

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

항상 가로 스크롤바가 표시됨

실제 스크롤 데모

아래 카드 줄은 컨테이너보다 넓습니다. 마우스 휠을 좌우로 굴리거나 트랙패드로 옆으로 밀어보세요. 가로 스크롤바가 생기고 카드가 옆으로 움직입니다.

oxa — oxa df gap16px

카드 1
카드 2
카드 3
카드 4
카드 5
카드 6
카드 7
카드 8

자식에 fs0(flex-shrink: 0)을 주지 않으면 카드가 줄어들어 스크롤이 아예 생기지 않습니다. 가로 스크롤 줄을 만들 때 가장 자주 놓치는 부분입니다.

클래스별 상세

oxvoverflow-x: visible

기본값입니다. 넘치는 콘텐츠를 자르지 않고 컨테이너 밖으로 그대로 그립니다. 스크롤 컨테이너가 만들어지지 않습니다.

언제 쓰나

툴팁, 드롭다운, 그림자처럼 부모 밖으로 삐져나와야 하는 요소가 있을 때 기본값 그대로 두면 됩니다. 이미 다른 곳에서 잘림이 걸린 요소를 되돌릴 때 명시적으로 씁니다.

<!-- Dropdown that must escape its narrow parent -->
<div class="oxv pr">
  <button class="py8px px16px bg18181B cFAFAFA br8px bn cp">Filter</button>
  <ul class="pa t100p l0 w28rem bg0F0F17 b1pxsolid27272A br8px p12px">
    <li class="py8px fs14px cA1A1AA">Wider than the button</li>
  </ul>
</div>

oxhoverflow-x: hidden

넘치는 가로 콘텐츠를 잘라내고 스크롤바도 표시하지 않습니다. 다만 요소는 스크롤 컨테이너가 되므로, 자바스크립트로 scrollLeft를 조작하면 여전히 움직일 수 있습니다.

언제 쓰나

장식용 배경이나 애니메이션 요소가 좌우로 삐져나와 가로 스크롤바를 만드는 것을 막을 때 씁니다.

<!-- Clip a decorative element that sticks out sideways -->
<section class="oxh pr w100p h30rem bg0F0F17 br12px">
  <div class="pa t0 l0 w120rem h30rem bg99-102-241-20"></div>
  <h2 class="pr fs3-2rem fw700 cFAFAFA p2rem">Hero</h2>
</section>

oxsoverflow-x: scroll

넘치든 넘치지 않든 항상 가로 스크롤바 자리를 잡아 둡니다.

언제 쓰나

콘텐츠 길이에 따라 스크롤바가 생겼다 사라지면서 레이아웃이 흔들리는 것이 싫을 때 씁니다. 스크롤바가 항상 보이므로 옆으로 더 볼 내용이 있다는 사실도 드러납니다.

<!-- Timeline where the scrollbar must always be visible -->
<div class="oxs w100p pb12px">
  <div class="df gap16px minw60rem">
    <div class="fs0 w20rem h8rem bg18181B br8px"></div>
    <div class="fs0 w20rem h8rem bg18181B br8px"></div>
    <div class="fs0 w20rem h8rem bg18181B br8px"></div>
  </div>
</div>

oxaoverflow-x: auto

콘텐츠가 넘칠 때만 가로 스크롤바를 표시합니다. 넘치지 않으면 visible처럼 보입니다.

언제 쓰나

가로 캐러셀, 넓은 표, 탭 줄 등 대부분의 가로 스크롤 영역에 쓰는 기본 선택지입니다.

<!-- Card strip: scrollbar only appears when it is needed -->
<div class="oxa df gap16px pb12px">
  <div class="fs0 w20rem h8rem bg6366F1 br8px"></div>
  <div class="fs0 w20rem h8rem bg6366F1 br8px"></div>
  <div class="fs0 w20rem h8rem bg6366F1 br8px"></div>
</div>

oxcoverflow-x: clip

hidden처럼 잘라내지만 스크롤 컨테이너를 만들지 않습니다. 그래서 자바스크립트로도 스크롤할 수 없습니다.

언제 쓰나

잘라내기만 하면 되고 스크롤은 절대 필요 없을 때 씁니다. 스크롤 컨테이너가 생기지 않으므로 안쪽의 position sticky 요소가 살아남는다는 장점이 있습니다. 다만 지원 범위가 hidden보다 좁습니다.

<!-- Clip without turning the element into a scroll container -->
<div class="oxc pr w100p h20rem br8px bg0F0F17">
  <div class="pa t0 l0 w120rem h20rem bg99-102-241-20"></div>
</div>

사용 예시

넓은 표와 카드 캐러셀의 기본 형태입니다.

<!-- Horizontally scrollable table -->
<div class="oxa">
  <table class="minw60rem">
    <tr><td>Wide table content...</td></tr>
  </table>
</div>

<!-- Horizontal scroll card carousel -->
<div class="oxa df gap16px pb12px">
  <div class="minw28rem bg18181B p2rem br8px fs0">Card 1</div>
  <div class="minw28rem bg18181B p2rem br8px fs0">Card 2</div>
  <div class="minw28rem bg18181B p2rem br8px fs0">Card 3</div>
</div>

<!-- Overflow prevention (code block) -->
<div class="oxh maxw100p">
  <pre>A very long line of code...</pre>
</div>

가로로도 세로로도 스크롤되는 리포트 표입니다. 헤더 행은 position sticky로 위에 고정하고, obxc로 가로 스크롤이 페이지로 전파되지 않게 막았습니다.

<!-- Wide report table with a sticky header row -->
<div class="oxa obxc w100p maxh50vh oya b1pxsolid27272A br8px">
  <table class="minw60rem w100p bcc fs14px">
    <thead>
      <tr>
        <th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Region</th>
        <th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Owner</th>
        <th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Pipeline</th>
        <th class="ps t0 tal py12px px16px bg18181B cA1A1AA wsn">Closed won</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="py12px px16px bb1pxsolid27272A wsn">APAC</td>
        <td class="py12px px16px bb1pxsolid27272A wsn">Kim</td>
        <td class="py12px px16px bb1pxsolid27272A wsn">120,000</td>
        <td class="py12px px16px bb1pxsolid27272A wsn">48,000</td>
      </tr>
    </tbody>
  </table>
</div>

팁 & 주의사항

한쪽 축만 지정하면 다른 축이 auto가 됩니다

overflow-x와 overflow-y 중 한쪽만 visible이 아닌 값을 주면, 브라우저는 나머지 축의 visible을 auto로 바꿉니다. 즉 oxh만 줬는데 세로 스크롤바가 생길 수 있습니다. 세로를 자르고 싶지 않다면 높이 제한을 두지 마세요.

body에 준 oxh가 sticky를 깨뜨립니다

가로 스크롤바를 없애려고 html이나 body에 oxh를 주면, 그 안의 position sticky 요소가 동작을 멈추는 경우가 많습니다. 진짜 원인(삐져나온 요소)을 찾아 그 요소에 잘라내기를 적용하거나, 스크롤 컨테이너를 만들지 않는 oxc를 쓰세요.

flex 자식이 안 줄어들게 해야 스크롤이 생깁니다

df 컨테이너의 자식은 기본적으로 줄어듭니다. fs0이나 최소 너비를 주지 않으면 콘텐츠가 압축되어 가로 스크롤이 생기지 않습니다.

잘림과 접근성

oxh로 감춘 내용은 화면에서 사라질 뿐 문서에는 남아 있습니다. 키보드 포커스가 보이지 않는 영역으로 이동하면 사용자가 길을 잃습니다. 감출 내용이 상호작용 요소라면 잘라내기 대신 실제로 제거하세요.

overflowoverflow-yoverscroll-behavior-xwhite-spacetext-overflow