overflow 속성과 스크롤 컨테이너는 어떻게 동작하나요?

Question

IT Interview Practice · Accepted Answer

`overflow`는 콘텐츠가 box에 **너무 클** 때 일어나는 일을 제어합니다 — 잘릴지, 스크롤될지, 넘쳐 흐를지.

```css
.box { overflow: visible; }  /* 기본값 — 콘텐츠가 box 밖으로 넘침 */
.box { overflow: hidden; }   /* 잘림 — 넘치는 콘텐츠가 잘려나감 */
.box { overflow: scroll; }   /* 항상 스크롤바 표시 (필요 없어도) */
.box { overflow: auto; }     /* 필요할 때만 스크롤바 표시 (최선) */
```

## 축 분리

```css
.box {
  overflow-x: hidden;  /* 수평 잘림 */
  overflow-y: auto;    /* 필요 시 수직 스크롤 */
}
```

흔한 패턴: 수직 스크롤은 허용하면서 수평 overflow는 방지하기.

## 스크롤 컨테이너 만들기

```css
.scroll-area {
  max-height: 400px;   /* 높이를 제한 */
  overflow-y: auto;    /* 400px를 넘는 콘텐츠가 스크롤됨 */
}
```

핵심: 스크롤 컨테이너는 **제한된 크기**(`height`/`max-height`)와 `overflow: auto`가 *함께* 필요합니다. 크기 제한이 없으면 box가 그냥 커지고 절대 스크롤되지 않습니다.

## 미묘하지만 중요한 부작용: overflow는 block formatting context를 만든다

```css
.clearfix { overflow: hidden; } /* float를 담거나 margin 상쇄를 막음 */
```

`overflow`를 `visible`이 아닌 값으로 설정하면 새 **block formatting context**가 만들어지는데, 이는 float된 자식을 담고 margin 상쇄를 방지합니다 — 역사적으로 "clearfix"로 사용되었습니다.

## 최신 스크롤 기능

```css
.gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* 스크롤하면서 아이템에 스냅 */
  overscroll-behavior: contain;   /* 스크롤 "연쇄"가 페이지로 가는 것을 막음 */
}
.gallery > * { scroll-snap-align: start; }
```

`scroll-snap`은 JS 없이 캐러셀을 만들고, `overscroll-behavior`는 스크롤된 패널이 뒤의 페이지까지 스크롤하는 것을 막습니다(모달/채팅 창에 적합).

## 왜 중요한가

`overflow`는 스크롤 영역, 텍스트 잘림(`text-overflow: ellipsis`와 함께), 모달/패널 스크롤 동작을 좌우합니다.

스크롤 컨테이너가 크기 제한을 필요로 한다는 것, `overflow`가 formatting context를 만든다는 것, 그리고 최신 도우미(`scroll-snap`, `overscroll-behavior`)를 아는 것이 overflow를 둘러싼 실무적 레이아웃과 UX 요구를 충족합니다.

축 분리

스크롤 컨테이너 만들기

미묘하지만 중요한 부작용: overflow는 block formatting context를 만든다

최신 스크롤 기능

왜 중요한가

관련 질문