주의사항

이 기사는 AI의 지원을 받아 작성되었습니다.

이런 경험, 없으신가요?

케이스 1: 카드 컴포넌트에서 긴 텍스트가 틀 밖으로 넘침. overflow: hidden을 추가 — 넘침은 멈췄지만, 글자가 중간에 잘려 읽을 수 없음. 어, 일부러 숨긴 건가?

케이스 2: 모달(Modal) 내에서 콘텐츠를 스크롤하고 싶음. .modal-body { overflow: auto; } — 콘텐츠는 긴데, 스크롤바가... 나오지 않음.

케이스 3: 네비게이션 바의 드롭다운 메뉴. 부모 요소에 overflow: hidden — 메뉴가 사라짐. z-index를 9999로 설정해도 소용없음. 넘치는 것은 메뉴인데, 왜 잘리는 걸까?

케이스 4: 상품 리스트, 긴 이름 때문에 레이아웃이 깨짐. text-overflow: ellipsis를 추가 — 말줄임표(...)가 나오지 않음. 분명히 썼는데?

케이스 5: 수백 건의 메시지가 있는 채팅 화면. 읽고 있는 중에 새 메시지가 로드됨 — 화면이 툭 하고 튀면서, 읽고 있던 위치가 사라짐. Scroll Anchoring이란 무엇인가? 어떻게 막을 수 있는가?

냉혹한 현실: 많은 사람은 overflow를 단순히 "넘치는 것을 숨기는 것"으로만 배웁니다. hidden과 clip의 차이, scroll과 auto의 차이, hidden인데도 JavaScript로 스크롤할 수 있는 이유 — 이 모든 것을 모른 채 디버깅(debug)하면, 추측만 반복하게 됩니다.

이 기사에서는 각 overflow 값과 브라우저 내부에서 실제로 일어나고 있는 일을 분석합니다. 이해하고 나면, hidden → auto → scroll 순으로 운에 맡기며 시도하는 횟수가 상당히 줄어들 것입니다. CSS에서는 콘텐츠가 요소의 padding box 크기를 초과했을 때 overflow(넘침)가 발생합니다.

하지만 overflow가 답하는 것은 "넘치는 것을 숨길 것인가"뿐만이 아닙니다. 어떻게 그릴 것인가, 사용자(또는 JavaScript)가 어떻게 조작할 것인가 — 이 세 가지를 동시에 지시하는 프로퍼티(property)입니다.

각 overflow 값은 3가지 측면을 동시에 제어합니다:

표시 (Display): 넘친 콘텐츠를 보여줄 것인가, 자를 것인가?
스크롤 (Scroll): 사용자(또는 JS)가 숨겨진 부분을 스크롤할 수 있는가?
레이아웃 (Layout): 새로운 블록 서식 문맥 (Block Formatting Context, BFC)을 생성하는가?

하나라도 놓치면 동작을 예측할 수 없습니다. 저도 overflow: hidden을 지정했는데 scrollTop이 작동해서 놀란 적이 있습니다 — 그때 저는 두 번째 측면을 놓치고 있었습니다.

overflow는 overflow-x와 overflow-y의 단축 속성(shorthand)입니다. 값이 1개면 → 양쪽 축에 적용. 2개면 → 첫 번째가 가로(overflow-x), 두 번째가 세로(overflow-y)입니다.

/* 양쪽 축 동일 */
overflow: hidden;
/* 가로는 hidden, 세로는 auto */
...

기본값 (Default) — 또한, 드롭다운이 부모로부터 "넘쳐 나와야" 하는데 이유를 알 수 없을 때의 범인이기도 합니다.

표시: 넘친 콘텐츠를 있는 그대로 표시하며, padding box 외부에 그려집니다.
스크롤: 스크롤 컨테이너(scroll container)가 되지 않습니다. 스크롤바가 없습니다.
BFC: 생성하지 않습니다.

사용처: 드롭다운, 툴팁(tooltip), 팝오버(popover) — 부모로부터 "넘쳐 나와야" 하는 것들. 단, 부모에게 overflow: hidden이 있다면 자식은 잘립니다. 결정하는 것은 자식이 아니라 부모입니다.

표시: 넘친 콘텐츠는 padding box에서 잘립니다 — 보이지 않지만 DOM에는 남아 있습니다.
스크롤: 스크롤바는 나오지 않지만, JavaScript로는 스크롤이 가능합니다 — scrollTop, scrollTo(), 앵커 링크(anchor link) 모두 작동합니다.
BFC: 생성합니다.

overflow: hidden은 "스크롤 불가"가 아닙니다. 단지 스크롤바를 표시하지 않을 뿐입니다. JS를 통해 숨겨진 콘텐츠를 표시 범위로 가져올 수 있습니다.

사용 사례: 캐러셀(Carousel), 모달 내 콘텐츠, 스크롤바를 숨기면서 코드로 스크롤을 제어하고 싶을 때.

비교적 최신 값으로, CSS Overflow Module Level 4에서 정의되었습니다. Chrome 90+, Firefox 81+, Safari 16+에서 지원합니다 — Can I Use: overflow: clip을 참조하세요.

표시: hidden과 동일 — 잘라냄(Clipping). overflow-clip-margin을 통해 클립 영역을 확장할 수 있습니다.

스크롤: 스크롤바 없음, JS 스크롤도 불가. 스크롤 컨테이너(scroll container)가 아닙니다.

BFC: 생성하지 않습니다.

hidden vs clip — 외형은 같지만 동작은 다릅니다:

사용 사례: 스크롤이 필요 없는 고정 컨테이너 — 둥근 아바타의 잘라내기, 장식 요소. BFC를 만들고 싶지 않을 때 유용합니다.

표시: 넘친 콘텐츠를 잘라냅니다.

스크롤: 콘텐츠가 넘치지 않더라도 항상 스크롤바를 표시합니다.

BFC: 생성합니다.

overflow: scroll은 필요하지 않아도 스크롤바의 공간을 확보합니다 — 레이아웃 시프트(layout shift) 방지에 유효합니다. macOS에서는 오버레이(overlay) 스크롤바가 항상 표시되지 않을 수도 있지만, 레이아웃상의 동작은 auto와 다릅니다. 스크롤바를 항상 표시하지 않으면서 거터(gutter)만 안정시키고 싶다면 scrollbar-gutter: stable을 검토하세요(섹션 5.7).

사용 사례: 데이터 테이블, 채팅창 — 스크롤바의 출현/소멸로 인해 레이아웃이 튀는 것을 방지하고 싶을 때.

표시: 넘친 콘텐츠를 잘라냅니다.

스크롤: 콘텐츠가 실제로 넘쳤을 때만 스크롤바를 표시합니다. 콘텐츠가 수용 범위 내에 있으면 바가 없습니다.

BFC: 생성합니다.

사용 사례: 대부분의 스크롤 컨테이너 — 모달 body, 사이드바, 카드 body. scroll과의 차이점은, 불필요할 때 스크롤바의 공간을 "미리 확보"하지 않는다는 것입니다.

overflow를 진정으로 이해하려면, **렌더링 파이프라인(rendering pipeline)**의 어디에 위치하는지를 보아야 합니다.

overflow는 단순한 "그리기 속성(drawing property)"이 아닙니다. Layout(스크롤 컨테이너 생성 시), Paint(클립 영역 결정 시), Composite(스크롤 컨테이너가 독립 레이어를 분리할 때) 모두에 관여합니다.

hidden, auto, scroll은 모두 **스크롤 컨테이너(scroll container)**를 만듭니다 — hidden도 스크롤바가 나오지 않더라도 마찬가지입니다.

clip과 visible은 만들지 않습니다.

스크롤 컨테이너는 세 가지 일을 합니다:

• 넘친 콘텐츠를 잘라냄
• 잘려 나간 부분을 스크롤을 통해 볼 수 있게 함 (clip 제외)
• 스크롤포트(scrollport) — 보이는 영역 —를 가짐

간과하기 쉬운 점: overflow: hidden도 완전한 스크롤 컨테이너입니다. 스크롤바가 없다고 해서 ≠ 스크롤할 수 없는 것이 아닙니다. 이것이 clip과의 가장 큰 차이점입니다.

overflow가 visible과 clip 이외의 값일 때, 요소는 새로운 BFC를 생성합니다.

BFC를 생성하면:

• 내부의 float를 포함 (contain)
• 외부의 float 침입 방지
• 마진 상쇄 (margin collapsing) 방지

overflow: clip은 BFC를 생성하지 않습니다. clip을 사용하면서 BFC가 필요하다면 display: flow-root와 조합하여 사용하세요.

CSS는 두 종류의 넘침 (overflow) 을 구분합니다:

• Ink overflow (잉크 넘침): 시각적으로는 넘치지만 박스 모델 (box model)에는 참여하지 않습니다.
  • 예: box-shadow, border-image, text-decoration, 폰트 글리프 (font glyph)의 넘침, outline
  • 스크롤 영역을 확장하지 않습니다
• Scrollable overflow (스크롤 가능한 넘침): 콘텐츠 자체가 박스 밖으로 벗어납니다.
  • 예: 긴 텍스트, 큰 이미지, 자식 요소
  • 스크롤 영역을 확장합니다

이 두 가지를 이해하면, box-shadow가 overflow: hidden에서 잘리는 이유(ink overflow도 클리핑되기 때문)와 overflow-clip-margin이 존재하는 이유를 알 수 있습니다.

.card {
  overflow: clip;
  overflow-clip-margin: 8px; /* 클리핑 영역을 확장 — box-shadow도 표시 */
  ...
}

overflow-clip-margin은 overflow: clip에서만 동작합니다 (hidden에서는 사용할 수 없습니다).

overflow: auto가 "작동하지 않는" 가장 일반적인 이유입니다.

오해: overflow: auto를 추가하면 스크롤바가 나타날 것이다.

실제: 브라우저는 스크롤포트 (scrollport)의 크기를 알아야 합니다. height나 max-height를 지정하지 않고 부모 레이아웃으로부터도 제한되지 않는 경우, 브라우저는 언제 콘텐츠가 "넘쳤는지" 판단할 수 없습니다.

/* ❌ 작동하지 않음: 높이가 고정되어 있지 않음 */
.box {
  overflow: auto;
  ...
}

브라우저는 **스크롤포트 크기 (scrollport size)**와 **스크롤 가능한 넘침 크기 (scrollable overflow size)**를 비교하여 스크롤바를 표시할지 결정합니다.

이 기사에서 가장 놓치기 쉬운 차이점입니다.

/* BFC를 생성함 */
.hidden-container {
  overflow: hidden;
  ...
}

clip을 사용하면서 BFC가 필요한 경우(float 포함, margin collapse 방지) 레이아웃이 어긋날 수 있습니다. 이럴 때는 display: flow-root를 추가하면 해결됩니다.

.clip-container {
  overflow: clip;
  display: flow-root; /* BFC 강제 */
  ...
}

// overflow: hidden 요소 → 스크롤 가능
const hiddenEl = document.querySelector('.hidden-container');
hiddenEl.scrollTop = 100; // ✅ 작동함
...

이는 명세(spec)에 따른 동작입니다. clip은 스크롤을 완전히 무효화합니다. 마우스 드래그, 터치, scrollTop 대입 모두 작동하지 않습니다.

말줄임표(…)를 원하지만, 이것만으로는 나타나지 않습니다:

/* ❌ 이것만으로는 말줄임표가 나타나지 않음 */
.text {
  white-space: nowrap;
  ...
}

올바른 작성법:

/* ✅ overflow와 조합함 */
.text {
  white-space: nowrap;
  overflow: hidden; /* 또는 clip, scroll, auto */
  text-overflow: ellipsis;
  ...
}

text-overflow는 overflow가 visible이 아닌 상태에서, 콘텐츠가 실제로 잘려 있을 때만 동작합니다. clip, hidden, scroll, auto 모두에서 사용할 수 있으며, clip이 스크롤 컨테이너 (scroll container)가 아니더라도 작동합니다.

명세를 처음 읽었을 때 많은 개발자가 놀라는 기술적인 세부 사항입니다.

CSS Overflow Module Level 3에 따르면, overflow-x

및 overflow-y의 **계산된 값 (computed value)**은 지정한 값과 반드시 일치하지 않습니다.

한쪽 축을 visible (기본값)로 지정하고, 다른 쪽 축을 scroll / auto / hidden으로 지정하면, visible인 축은 브라우저가 auto로 변환합니다.

/* 당신이 지정한 값 */
.box {
overflow-x: visible;
...

왜 그럴까요? 한쪽 축만 스크롤이 가능하고 다른 한쪽은 자유롭게 넘치는 — 이러한 모순된 동작은 허용되지 않습니다. 그래서 visible을 auto로 "승격"시키는 것입니다.

결과: 한쪽은 정말로 visible로, 다른 한쪽은 hidden으로 만들고 싶다면 — overflow-x / overflow-y만으로는 불가능합니다. 자르고 싶은 축에는 clip을 사용하세요. clip은 auto로 변환되지 않습니다.

/* 한쪽은 visible, 다른 한쪽은 잘라내는 방법 */
.box {
overflow-x: visible;
...

Flexbox와 Grid에서는 overflow가 아이템의 **자동 최소 크기 (automatic minimum size)**에 영향을 미칩니다.

CSS Flexbox 명세 (Spec)에 따르면, flex 아이템에서는:

• 메인 축 (main axis)에서 overflow: visible일 때
  → automatic minimum size = min-content
• overflow가 visible 이외의 값일 때
  → automatic minimum size는 0이 될 수 있음

즉, overflow: hidden인 flex 아이템은 visible일 때보다 더 작게 줄어들 수 있습니다. 아이템이 수축(shrink)하지 않을 때 자주 사용하는 테크닉입니다.

.flex-container {
display: flex;
}
...

실전 팁: 단순히 수축시키기 위해 overflow를 변경하기보다는, min-width: 0 (flex-direction: column인 경우 min-height: 0)을 사용하는 것이 더 직접적이며, 콘텐츠를 자르고 싶지 않을 때 발생하는 부작용도 적습니다.

.flex-item {
min-width: 0; /* 콘텐츠보다 작게 수축될 수 있음 */
/* flex-direction: column 이라면 min-height: 0 */
...

부모 요소에 border-radius + overflow: hidden을 적용하는 것은 이미지나 콘텐츠의 모서리를 둥글게 만들 때 매우 자주 사용됩니다. 하지만 동시에 tooltip, dropdown, box-shadow, position: absolute를 가진 자식 요소들도 함께 잘라버립니다. z-index로는 해결할 수 없습니다. 클리핑(clip)은 쌓임 맥락 (stacking context)보다 먼저 일어나기 때문입니다.

overflow: overlay는 WebKit/Blink의 비표준 값이었습니다. 스크롤바가 레이아웃 공간을 차지하지 않고 콘텐츠 위에 겹쳐서 그려지는 방식입니다. 현재는 deprecated (사용 중단 예정) 되었으므로, 신규 프로젝트에서는 사용하지 마세요.

대신 scrollbar-gutter를 사용하면 overflow: scroll 없이도 스크롤바를 위한 공간을 확보할 수 있습니다:

.modal-body {
overflow-y: auto;
scrollbar-gutter: stable; /* gutter를 확보하여 스크롤바 등장 시 레이아웃 시프트 (layout shift) 방지 */
...

**스크롤 앵커링 (Scroll Anchoring)**은 상단 콘텐츠의 크기가 변했을 때 (이미지 로딩 완료, 폰트 스왑, 새로운 메시지 삽입 등) 브라우저가 자동으로 스크롤 위치를 조정하는 기능입니다. 목적은 좋습니다. 읽고 있는 부분이 밀려나지 않도록 하기 때문입니다.

문제가 발생하는 경우? 상단 방향으로의 무한 스크롤 (infinite scroll), 피드에 새로운 게시물 삽입, 레이지 로딩 (lazy-load) 이미지로 인해 상단 블록의 높이가 높아지는 경우 — 읽고 있는 도중에 뷰포트 (viewport)가 갑자기 튀어 오를 수 있습니다.

/* 특정 요소의 anchoring (anchoring) 무효화 */
.chat-message {
overflow-anchor: none;
...

scroll anchoring (scroll anchoring)의 무효화도 양날의 검입니다. 화면이 튀지는 않지만, 상단 콘텐츠가 변경될 때 사용자가 읽고 있던 위치를 놓칠 가능성이 있습니다. 스크롤 위치를 직접 제어할 때만 사용하세요 (예: 오래된 메시지를 prepend (prepend) 할 때 scroll position (scroll position)을 유지하는 경우).

누구나 한 번쯤 겪게 되는 CSS 버그 — 그리고 overflow (overflow)를 제대로 이해하고 있는지 확인하는 테스트이기도 합니다.

상황: 네비게이션 바 (navbar)에 드롭다운. 모서리를 둥글게 만들기 위해 overflow: hidden (overflow: hidden)을 지정 — 드롭다운이 중간에 잘림. 익숙한 상황이죠?

<nav class="navbar">
<ul class="menu">
<li class="menu-item">
...

.navbar {
border-radius: 8px;
overflow: hidden; /* ⚠️ 모서리를 둥글게 하려다 재앙이 발생! */
...

결과: 드롭다운이 네비게이션 바의 border-radius (border-radius)를 따라 잘려 나갑니다.

왜? overflow: hidden (overflow: hidden)은 네비게이션 바 내의 모든 콘텐츠에 **클립 영역 (clip region)**을 만듭니다 — position: absolute (position: absolute)를 가진 자식 요소도 포함해서 말이죠. 클립 (clip)은 z-index (z-index) 및 stacking context (stacking context) 처리보다 먼저 일어납니다. z-index (z-index)를 아무리 높여도 소용없습니다.

해결책:

• 드롭다운을 포함하는 컨테이너에 모서리 곡선이 필요하다면 overflow: hidden (overflow: hidden)을 사용하지 마세요. clip-path (clip-path)를 사용하거나, 자식 요소에 직접 border-radius (border-radius)를 적용하세요.
• 드롭다운을 외부로 빼내세요 — React Portal (React Portal)을 사용하여 overflow: hidden (overflow: hidden)이 필수적인 상황이라면, <body> (<body>)에 render (render) 하는 것이 일반적입니다.

실제 환경에서 UI 라이브러리가 처리하는 방식:

Radix UI, Headless UI, Floating UI (구 Popper.js)는 대개 다음 두 가지 방식 중 하나를 선택합니다:

• Portaling (Portaling): 드롭다운을 <body> (<body>)나 최상위 컨테이너에 render (render) 하여 조상 요소의 overflow (overflow) 제약에서 벗어납니다.
• position: fixed (position: fixed): absolute (absolute)가 아닌 viewport (viewport) 기준으로 배치하고, Floating UI로 위치를 계산하여 중간 컨테이너에 의한 클립 (clip)을 회피합니다.

추가로, popover API가 단계적으로 지원되고 있습니다 — 네이티브 오버레이 (overlay) 메커니즘으로, 가까운 미래에 가벼운 선택지가 될 수 있습니다.

다음은 **채팅의 scroll-to-bottom (scroll-to-bottom)**을 모사한 예시입니다: 새 메시지가 오면 자동으로 최하단으로 스크롤합니다. 위쪽 방향의 infinite scroll (infinite scroll) prepend (prepend, 오래된 메시지 로드)와는 다릅니다 — 후자의 경우 scroll anchoring (scroll anchoring) 처리가 필요합니다 (섹션 5.8).

ScrollContainer.tsx + ScrollContainer.css — 전체 코드

import React, { useRef, useEffect } from 'react';
import './ScrollContainer.css';
interface ScrollContainerProps {
...

.scroll-container {
height: 400px; /* ⚠️ 중요: 고정 높이가 필요함 */
overflow-y: auto; /* 필요할 때만 세로 스크롤 */
...

기억할 점:

• height: 400px (height: 400px)가 scrollport (scrollport)를 만듭니다 — 고정된 크기가 없으면 overflow: auto (overflow: auto)는 작동하지 않습니다 (섹션 4.5).
• overflow-y: auto (overflow-y: auto)는 콘텐츠가 400px을 초과할 때만 세로 스크롤바를 표시합니다.
• useEffect (useEffect)에서 scrollTop = scrollHeight (scrollTop = scrollHeight) 방식은 append (append) 방식의 채팅에 적합합니다. prepend (prepend) 방식이라면 scrollTop (scrollTop)의 저장/복원이 필요하거나, overflow-anchor: none (overflow-anchor: none)을 사용해야 합니다.

를 검토하십시오 (섹션 5.8).

overflow

가 예상대로 작동하지 않을 때, 다음 순서로 확인하십시오:

• 크기가 정해져 있는가? (height, width, max-height, 또는 부모 레이아웃에서의 제한) → 섹션 4.5
• 어떤 값을 사용하고 있는가? visible, hidden, clip, scroll, auto의 차이를 파악하고 있는가?
• JS로 스크롤이 필요한가? 예 → clip 대신 hidden을 사용하십시오.
• BFC (Block Formatting Context)가 필요한가? clip은 BFC를 생성하지 않습니다 → display: flow-root를 추가하거나 hidden을 사용하십시오.
• 계산된 값 (computed value)의 함정인가? 한쪽이 visible이고 다른 한쪽이 hidden/scroll/auto인 경우 → visible은 auto가 됩니다. → 섹션 5.4
• text-overflow: ellipsis가 나타나지 않는가? overflow: hidden / clip + white-space: nowrap이 설정되어 있는가? → 섹션 5.3
• Flex/Grid 아이템이 줄어들지 않는가? overflow: hidden 또는 min-width: 0을 시도하십시오. → 섹션 5.5
• 스크롤 중에 화면이 튀는가? Scroll Anchoring의 가능성 — overflow-anchor: none을 시도하십시오. → 섹션 5.8
• 그것은 ink overflow입니다 — box-shadow / outline이 잘리는가? overflow-clip-margin을 검토하십시오.
• 드롭다운/툴팁이 잘리는가? 조상 요소에 overflow: hidden + border-radius가 있는지 확인하십시오. → 섹션 6

overflow는 단순히 "넘치는 부분을 숨기는 것"만이 아닙니다. 박스를 벗어난 콘텐츠를 어떻게 처리할지를 브라우저에 지시하며, Layout(레이아웃)부터 Composite(합성)까지 렌더링 파이프라인 전체에 영향을 미칩니다.

빠른 요약:

• 기능: 표시, 스크롤, BFC. overflow는 이 세 가지를 제어합니다.
• 숨기기: hidden vs clip. hidden은 JS 스크롤이 가능하며 BFC를 생성하지만, clip은 둘 다 불가능합니다.
• 스크롤: scroll vs auto. scroll은 스크롤바(scrollbar) 공간을 항상 확보하고, auto는 필요할 때만 확보합니다. gutter(거터)만 안정시키고 싶다면 scroll 대신 scrollbar-gutter: stable을 사용하십시오.
• 크기: 구체적인 크기가 없으면 scrollport(스크롤 포트)를 만들 수 없습니다.
• 계산된 값의 함정: visible + 다른 축 → visible은 auto가 됩니다.
• Flexbox/Grid: overflow는 automatic minimum size(자동 최소 크기)에 영향을 미칩니다 — 또는 min-width: 0을 사용하십시오.
• 숨기기 주의사항: 드롭다운/툴팁 버그의 온상입니다. hidden + border-radius를 주의하십시오.
• Scroll Anchoring: 뷰포트(viewport)가 튀는 원인이 됩니다 — overflow-anchor로 제어하십시오.
• 텍스트 처리: text-overflow: ellipsis는 clip에서도 작동합니다 (스크롤 컨테이너가 아니더라도).

이것들을 파악하면:

• 콘텐츠가 넘칠 때의 레이아웃을 더 정확하게 예측할 수 있습니다.
• 스크롤 문제의 디버깅(debug)이 빨라집니다 (추측이 줄어듭니다).
• 큰 콘텐츠에서도 성능을 최적화하기 쉽습니다.
• 복잡한 UI (모달, 채팅, 테이블)를 안정적으로 구축할 수 있습니다.

브라우저의 의사결정 트리

요약하자면: overflow는 브라우저에 대한 명령입니다 — 스크롤 컨테이너(scroll container)를 만들 것인가, BFC를 만들 것인가, 스크롤바를 어떻게 표시할 것인가.

참고 자료:

• MDN: overflow-x
• MDN: overflow-anchor
• MDN: scrollbar-gutter
• CSS Overflow Module Level 3 Specification
• Can I Use: overflow: clip
• Chrome 90 Blog: overflow: clip

【Frontend CSS – 파트 13】 브라우저 관점에서의 반응형 레이아웃: 왜 미디어 쿼리 (Media Query)만으로는 불충분한가?