CSS / Reference / overflow

overflow는 내용이 박스의 표시 영역을 넘을 때 보이게 둘지, 자를지, 스크롤할지 정합니다. 필요한 경우에만 스크롤하려면 auto를 사용하고, hidden과 clip은 스크롤 컨테이너 동작이 서로 다르다는 점을 확인해야 합니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.panel { max-height: 12rem; overflow: auto; }
.decoration { overflow: clip; }

값과 적용 조건은 MDN overflow에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 overflow-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>overflow 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 120px; border: 2px solid #006c9c; }
.target { overflow: auto; }
.reference { overflow: hidden; }
.long { height: 280px; background: linear-gradient(#bfe3ff, #ffd166); }
</style>
</head>
<body>
<main id="demo">
<h1>overflow 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">auto</p><div class="target"><div class="long">내용이 박스보다 깁니다.<br>박스 안을 스크롤해 확인하세요.</div></div></div><div class="b"><p class="label">hidden</p><div class="reference"><div class="long">내용이 박스보다 깁니다.<br>박스 안을 스크롤해 확인하세요.</div></div></div></section>
</main>
</body>
</html>

auto 박스는 내용이 긴 만큼 내부를 스크롤할 수 있습니다. hidden 박스는 넘친 내용이 보이지 않으며 일반적인 스크롤바를 제공하지 않습니다.

크기 제한과 축별 설정

내용이 넘치려면 해당 축의 크기가 제한되어야 합니다. 높이를 제한하지 않은 블록은 내용에 맞춰 늘어날 수 있습니다. 값 두 개는 가로·세로 순서이며, 한 축이 visible이고 다른 축이 hidden 또는 auto이면 visible이 auto로 계산되는 등 축 사이의 조정 규칙이 있습니다.

스크롤과 내용 잘림의 선택

hidden은 스크롤 컨테이너를 만들고 포커스나 스크립트로 이동할 수 있지만 clip은 그러한 스크롤을 허용하지 않습니다. clip만으로 새 블록 서식 맥락을 만드는 것은 아니므로 필요하면 display: flow-root를 따로 검토합니다. 폼 설명이나 키보드 포커스 표시가 잘리지 않는지도 확인하세요.

hidden과 clip의 스크롤 차이

다음 전체 문서를 css-reference-10599-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>hidden과 clip의 스크롤 차이</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.box { height:100px;max-width:240px;border:2px solid #718096;background:#e6f2ff; } .tall { height:260px;background:linear-gradient(#006c9c,#ffd166); } #hidden {overflow:hidden;} #clip {overflow:clip;}
  </style>
</head>
<body>
<main>
  <h1>hidden과 clip의 스크롤 차이</h1>
<p>hidden</p><div class="box" id="hidden"><div class="tall"></div></div><p>clip</p><div class="box" id="clip"><div class="tall"></div></div><button id="test" type="button">scrollTop = 50 확인</button> <button id="reset" type="button">복구</button><p id="result" aria-live="polite"></p><script>function test(value){const h=document.getElementById("hidden"),c=document.getElementById("clip");h.scrollTop=value;c.scrollTop=value;document.getElementById("result").textContent="hidden: "+h.scrollTop+" / clip: "+c.scrollTop;}document.getElementById("test").onclick=()=>test(50);document.getElementById("reset").onclick=()=>test(0);</script>
</main>
</body>
</html>

버튼을 누르면 hidden은 50, clip은 0이 예상됩니다. 둘 다 스크롤바가 없어도 hidden은 스크롤 컨테이너이고 clip은 그렇지 않습니다. 복구 버튼으로 hidden을 0으로 되돌립니다. overflow-x/y의 다른 값 조합은 계산값을 바꿀 수 있으므로 이 실습에서는 두 축을 함께 지정했습니다.

내용이 넘치는 원인과 스크롤 영역을 함께 살펴보려면 넘치는 콘텐츠와 긴 문자열 처리하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 white-space입니다.

적용되지 않거나 예상과 다를 때

• auto가 동작하지 않으면 width, height 또는 max-height가 실제로 제한되어 있는지 확인합니다.
• flex 자식이 늘어나면 min-width: 0 또는 min-height: 0이 필요한 구조인지 확인합니다.