---
id: css-overflow
title: "CSS Overflow"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["overflow", "CSS overflow", "overflow visible", "overflow hidden", "overflow scroll", "overflow auto", "clipping content"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "overflow", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_overflow.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Overflow]]

## 🎯 한 줄 통찰 (One-line insight)
The CSS `overflow` property controls what happens to content that is too big to fit its box — whether to clip it or add scrollbars — via four values: `visible`, `hidden`, `scroll`, and `auto`. [S1]

## 🧠 핵심 개념 (Core concepts)
- **purpose** — the `overflow` property controls what happens to content that is too big to fit into an area; it specifies whether to clip the content or add scrollbars when content is too big. [S1]
- **visible (default)** — the overflow is not clipped; the content renders outside the element's box. [S1]
- **hidden** — the overflow is clipped, and the rest of the content is hidden. [S1]
- **scroll** — scrollbars are added; the user must scroll to see all content. [S1]
- **auto** — similar to `scroll`, but adds scrollbars only when necessary. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Contain runaway content** — set `overflow: hidden` (clip) or `overflow: auto` (scroll only when needed) on a fixed-size box to keep oversized content within bounds. [S1]
- **Always-vs-conditional scrollbars** — `scroll` always shows scrollbars; `auto` shows them only when content actually overflows. [S1]

## 📖 세부 내용 (Details)
**Overview** [S1]
The CSS `overflow` property controls what happens to content that is too big to fit into an area. It specifies whether to clip the content or to add scrollbars when the content of an element is too big.

**The four overflow values** [S1]
1. **visible** — Default. The overflow is not clipped. The content renders outside the element's box.
2. **hidden** — The overflow is clipped, and the rest of the content is hidden.
3. **scroll** — Scrollbars are added. User must scroll to see all content.
4. **auto** — Similar to `scroll`, but adds scrollbars only when necessary.

**Example 1: overflow: visible** [S1]
```css
div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}
```

**Example 2: overflow: hidden** [S1]
```css
div {
  overflow: hidden;
}
```

**Example 3: overflow: scroll** [S1]
```css
div {
  overflow: scroll;
}
```

**Example 4: overflow: auto** [S1]
```css
div {
  overflow: auto;
}
```

**CSS Overflow Properties Table** [S1]

| Property | Description |
|----------|-------------|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-anchor | Makes it possible to turn off scroll anchoring |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |

## 🛠️ 적용 사례 (Applied in summary)
The page applies all four values to a fixed-size `div` (200px × 65px, coral background): `visible` lets content spill out, `hidden` clips it, `scroll` always shows scrollbars, and `auto` shows scrollbars only when needed. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Clip overflowing content (language: CSS):
```css
div {
  overflow: hidden;
}
```

Add scrollbars only when needed (language: CSS):
```css
div {
  overflow: auto;
}
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **visible** — default; content overflows the box and is shown. [S1]
- **hidden** — content is clipped and the excess is hidden (no scrollbars). [S1]
- **scroll** — scrollbars are always present, even if not needed. [S1]
- **auto** — scrollbars appear only when content overflows; choose this for the cleanest conditional scrolling. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Overflow X and Y]], [[CSS Position Fixed and Absolute]], [[CSS Float]]
- **참조 맥락:** Referenced whenever content may exceed a fixed-size container and must be clipped or scrolled.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Overflow — https://www.w3schools.com/css/css_overflow.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Overflow" page (Astra wiki-curation, P-Reinforce v3.1 format).