overflow

컨테이너를 넘치는 콘텐츠의 처리 방식을 제어합니다. 스크롤, 잘라내기, 또는 그대로 표시할지를 결정하며, border-radius 클리핑이나 블록 서식 컨텍스트 생성에도 영향을 줍니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`ov`	overflow: visible	기본값. 넘치는 콘텐츠가 컨테이너 밖으로 표시
`oh`	overflow: hidden	넘치는 콘텐츠를 잘라냄. 스크롤바 없음
`os`	overflow: scroll	항상 스크롤바 표시. 넘치지 않아도 스크롤바 유지
`oa`	overflow: auto	넘칠 때만 스크롤바 표시. 가장 많이 사용
`oc`	overflow: clip	넘치는 콘텐츠를 잘라냄. 프로그래밍 스크롤도 차단

시각적 비교

고정 크기 컨테이너(w20rem h10rem)에 넘치는 텍스트를 넣어 각 overflow 값의 차이를 비교합니다.

Visible — ov

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

기본값. 콘텐츠가 컨테이너 밖으로 넘쳐 표시됩니다

Hidden — oh

넘치는 부분이 잘려 보이지 않습니다. 스크롤 불가

Scroll — os

항상 스크롤바가 표시됩니다

Auto — oa

콘텐츠가 넘칠 때만 스크롤바가 나타납니다

Clip — oc

hidden과 비슷하지만 프로그래밍 스크롤도 차단됩니다

축별 제어 — overflow-x / overflow-y

가로와 세로 축을 개별적으로 제어하려면 overflow-x와 overflow-y 전용 클래스를 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`oxv`	overflow-x: visible	가로 축 넘침 그대로 표시
`oxa`	overflow-x: auto	가로 축만 넘칠 때 스크롤
`oxh`	overflow-x: hidden	가로 축 넘침 잘라냄
`oxs`	overflow-x: scroll	가로 축 항상 스크롤바 표시
`oxc`	overflow-x: clip	가로 축 넘침 잘라냄 (프로그래밍 스크롤도 차단)
`oyv`	overflow-y: visible	세로 축 넘침 그대로 표시
`oya`	overflow-y: auto	세로 축만 넘칠 때 스크롤
`oyh`	overflow-y: hidden	세로 축 넘침 잘라냄
`oys`	overflow-y: scroll	세로 축 항상 스크롤바 표시
`oyc`	overflow-y: clip	세로 축 넘침 잘라냄 (프로그래밍 스크롤도 차단)

클래스별 상세

`ov`overflow: visible

기본값입니다. 넘치는 콘텐츠가 컨테이너 밖으로 그대로 표시됩니다. 별도로 지정할 일은 드물지만, 다른 overflow 값을 리셋할 때 사용합니다.

<!-- Default reset (restore child when parent has oh) -->
<div class="oh br8px">
  <div class="ov">This child is reset to overflow: visible</div>
</div>

`oh`overflow: hidden

넘치는 콘텐츠를 잘라냅니다. 스크롤바 없이 깔끔하게 잘리며, 새로운 블록 서식 컨텍스트(BFC)를 생성합니다. border-radius 클리핑 문제 해결에 자주 사용됩니다.

<!-- border-radius clipping -->
<div class="oh br8px">
  <img src="photo.jpg" class="w100p db" />
  <div class="p16px">Image is clipped to rounded corners</div>
</div>

<!-- Text truncation (single line) -->
<p class="oh wsn toe w20rem">
  This text is shown in one line and truncated with ... if it overflows
</p>

<!-- Clearfix (creates BFC) -->
<div class="oh">
  <div class="fl w50p">Float Left</div>
  <div class="fl w50p">Float Right</div>
  <!-- oh automatically resolves parent height -->
</div>

주요 활용

`oh br8px`	border-radius 클리핑 — 자식 요소가 둥근 모서리를 뚫고 나오는 문제 해결
`oh`	Clearfix — float 자식의 높이를 부모가 잡지 못하는 문제 해결 (BFC 생성)
`oh wsn toe`	텍스트 말줄임 — 한 줄 텍스트를 잘라내고 ... 표시

주의

oh는 스크롤 없이 콘텐츠를 잘라내므로, 사용자가 잘린 콘텐츠에 접근할 수 없습니다. 스크롤이 필요하면 oa를 사용하세요.

`os`overflow: scroll

콘텐츠가 넘치지 않아도 항상 스크롤바를 표시합니다. 레이아웃 시프트를 방지하고 싶을 때 유용하지만, 대부분의 경우 oa가 더 적합합니다.

<!-- Always show scrollbar -->
<div class="os h20rem p16px">
  <p>Scrollbar is shown even with little content.</p>
  <p>Useful for preventing layout shift.</p>
</div>

`oa`overflow: auto

콘텐츠가 넘칠 때만 스크롤바를 표시합니다. 가장 많이 사용하는 overflow 값이며, 사이드바, 모달 내부, 코드 블록 등에 적합합니다.

<!-- Sidebar scroll -->
<aside class="oa h100vh p2rem">
  <nav>Long menu list...</nav>
</aside>

<!-- Modal inner scroll -->
<div class="modal pa t50p l50p bg18181B br8px p2rem">
  <div class="oa maxh50vh">
    <p>Scrollable when long content is added...</p>
  </div>
</div>

<!-- Wide table horizontal scroll -->
<div class="oxa w100p">
  <table class="w200rem">...</table>
</div>

자주 쓰는 조합

`oa h40rem`	고정 높이 스크롤 영역 (사이드바, 패널)
`oa maxh50vh`	최대 높이 제한 스크롤 (모달 내부)
`oxa`	가로 스크롤만 (넓은 테이블, 코드 블록)
`oya`	세로 스크롤만 (리스트, 채팅창)

`oc`overflow: clip

oh와 비슷하게 넘치는 콘텐츠를 잘라내지만, 프로그래밍 방식의 스크롤도 완전히 차단합니다. BFC를 생성하지 않는 것도 차이점입니다.

<!-- Programmatic scroll also blocked -->
<div class="oc w20rem h10rem">
  Overflowing content is clipped, and JavaScript scrollTo() does not work.
</div>

oh vs oc

oh는 JavaScript의 scrollTo()로 스크롤 가능하고 BFC를 생성합니다. oc는 프로그래밍 스크롤도 차단하며 BFC를 생성하지 않습니다.

자주 쓰는 패턴

oh br8px 조합은 자식 요소가 부모의 border-radius를 뚫고 나오는 문제를 해결합니다.

<!-- ✅ border-radius clipping Pattern -->
<div class="oh br8px b1pxsolid27272A">
  <img src="cover.jpg" class="w100p db" />
  <div class="p16px">
    Child image does not break through parent rounded corners
  </div>
</div>

<!-- ❌ Without oh, child ignores border-radius -->
<div class="br8px b1pxsolid27272A">
  <img src="cover.jpg" class="w100p db" />
  <div class="p16px">Image breaks through the corners</div>
</div>

<!-- Scrollable sidebar -->
<div class="dg gtc25rem-1fr h100vh">
  <aside class="oa py2rem px16px">
    <nav>Long menu list</nav>
  </aside>
  <main class="oa p2rem">Main Content</main>
</div>

팁 & 주의사항

oh는 콘텐츠를 잘라냄

oh는 스크롤바 없이 넘치는 콘텐츠를 잘라냅니다. 사용자가 잘린 내용에 접근할 수 없으므로, 스크롤이 필요하면 oa를 사용하세요.

oa = 필요할 때만 스크롤

oa는 콘텐츠가 넘칠 때만 스크롤바를 표시합니다. os는 항상 스크롤바가 보이므로 대부분 oa가 더 적합합니다.

oh는 새 블록 서식 컨텍스트(BFC) 생성

oh는 BFC를 생성하여 float 요소의 clearfix 역할도 합니다. 자식의 float가 부모 높이를 잡지 못하는 문제를 해결합니다.

overflow-x overflow-y text-overflow visibility

overflow

클래스 목록

시각적 비교

축별 제어 — overflow-x / overflow-y

클래스별 상세

ovoverflow: visible

ohoverflow: hidden

osoverflow: scroll

oaoverflow: auto

ocoverflow: clip