CSS overflow는 상자보다 큰 콘텐츠로 상자가 수행하는 작업을 제어합니다. visible(기본값)는 쏟아져 나오고, hidden 및 clip는 잘라내고, scroll 및 auto는 상자 스크롤을 만듭니다.
상자가 내용물을 초과할 수 있는 크기가 될 때까지 그 중 누구도 아무것도 하지 않습니다.
하나의 상자에 5가지 값을 사용해 보세요. 그런 다음 height: auto를 선택하고 모든 값이 수직 방향에 더 이상 영향을 주지 않는지 확인하세요.
실행 예제직접 써 보고 코드를 복사하세요
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS overflow playground</title>
<style>
body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; color: #1d2330; background: #f4f5f7; }
.controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.controls label { font: 13px ui-monospace, Consolas, monospace; background: #fff; border: 1px solid #d5d9e0; border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.controls input:checked + span { font-weight: 700; color: #0f5132; }
.sliders { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; margin-bottom: 14px; max-width: 420px; }
.stage { min-height: 250px; }
/* the box under test */
#box {
overflow: visible; /* changed by the buttons */
width: 220px;
height: 110px;
padding: 10px;
background: #fff;
border: 2px solid #2563eb;
border-radius: 8px;
font-size: 14px; line-height: 1.45;
}
.url { font-family: ui-monospace, Consolas, monospace; color: #9a3412; }
#out { white-space: pre-wrap; font: 13px ui-monospace, Consolas, monospace; background: #1d2330; color: #e5e7eb; border-radius: 8px; padding: 8px 10px; }
</style>
</head>
<body>
<div class="controls" id="values">
<label><input type="radio" name="v" value="visible" checked> <span>visible</span></label>
<label><input type="radio" name="v" value="hidden"> <span>hidden</span></label>
<label><input type="radio" name="v" value="clip"> <span>clip</span></label>
<label><input type="radio" name="v" value="scroll"> <span>scroll</span></label>
<label><input type="radio" name="v" value="auto"> <span>auto</span></label>
</div>
<div class="sliders">
<span>width</span><input type="range" id="w" min="120" max="340" value="220"><span id="wv">220px</span>
<span>height</span><input type="range" id="h" min="60" max="300" value="110"><span id="hv">110px</span>
<span></span><label><input type="checkbox" id="auto"> height: auto</label><span></span>
</div>
<div class="stage">
<div id="box">
This box has more text than it can hold. Pick a value above and watch what happens to the lines that do not fit.
The address below has no spaces, so it cannot wrap:
<span class="url">example.com/a/very/long/path/without/any/spaces</span>
</div>
</div>
<div id="out"></div>
<script>
const box = document.getElementById('box');
const out = document.getElementById('out');
const w = document.getElementById('w'), h = document.getElementById('h'), auto = document.getElementById('auto');
function update() {
box.style.overflow = document.querySelector('input[name=v]:checked').value;
box.style.width = w.value + 'px';
box.style.height = auto.checked ? 'auto' : h.value + 'px';
h.disabled = auto.checked;
document.getElementById('wv').textContent = w.value + 'px';
document.getElementById('hv').textContent = auto.checked ? 'auto' : h.value + 'px';
// scrollHeight = height of the content, clientHeight = height of the visible area
const tooTall = box.scrollHeight > box.clientHeight;
const tooWide = box.scrollWidth > box.clientWidth;
out.textContent = 'overflow: ' + box.style.overflow +
'\ncontent overflows: ' + (tooTall ? 'down ' : '') + (tooWide ? 'sideways' : '') + (!tooTall && !tooWide ? 'no' : '');
}
document.getElementById('values').addEventListener('change', update);
[w, h, auto].forEach(el => el.addEventListener('input', update));
update();
</script>
</body>
</html>
다섯 가지 가치
| 가치 | 맞지 않는 콘텐츠 | 스크롤 가능 | 일반적인 사용 |
|---|---|---|---|
visible |
상자 외부에 그려진 | 아니요 | 기본값입니다. 대부분의 상자 |
hidden |
패딩 가장자리를 잘라냅니다. | 스크립트로만, 막대 없음 | 둥근 카드, 이미지 자르기 |
clip |
패딩 가장자리를 잘라냅니다. | 아니, 대본으로도 안 돼 | 부작용 없이 절단 |
scroll |
스크롤하여 도달함 | 예, 바 예약됨 | 너비가 이동해서는 안 되는 패널 |
auto |
스크롤하여 도달함 | 예, 필요할 때 바를 사용합니다. | 채팅 로그, 코드 블록, 측면 패널 |
auto는 거의 모든 스크롤 상자에 적합한 선택입니다. scroll는 아무것도 넘치지 않을 때에도 막대를 위한 공간을 유지하는 클래식 스크롤 막대를 그리는 시스템에서만 다릅니다.
휴대폰과 오버레이 스크롤바가 있는 시스템에서는 스크롤하는 동안에만 막대가 나타나므로 둘이 동일하게 보입니다.
막대 자체의 모양을 변경하려면 스크롤 막대 스타일 지정을 참조하세요.
오버플로는 무엇이든 하려면 크기가 필요합니다.
height가 없는 블록 상자는 내용에 맞게 커집니다. 항상 맞는 콘텐츠는 결코 넘치지 않으므로 이러한 상자의 overflow: auto는 스크롤바를 표시하지 않으며 overflow: hidden는 아무것도 자르지 않습니다.
이것이 오버플로가 "아무 것도 하지 않는" 가장 일반적인 이유입니다. 수정 사항은 다음과 같습니다.
.panel {
max-height: 300px; /* grows up to 300px, then scrolls */
overflow-y: auto;
}
max-height는 일반적으로 height보다 낫습니다. 짧은 목록은 짧게 유지되고 긴 목록은 스크롤됩니다. Flex 또는 그리드 레이아웃에서는 상자가 레이아웃을 넘어서 커지지 않는 한 크기가 레이아웃 자체에서 나올 수도 있습니다.
옆모습은 다릅니다. 블록의 너비는 이미 상위 요소에 의해 제한되어 있으므로 내부의 항목(긴 단어나 주소, 넓은 이미지 또는 white-space: nowrap)을 축소하거나 감쌀 수 없는 경우 수평 오버플로가 발생합니다.
상자 스크롤 만들기
- 상자에 크기를 지정합니다.
height또는max-height를 설정하고 옆으로 스크롤해야 하는 경우 너비를 설정합니다. - 오버플로를 설정합니다. 양방향의 경우
overflow: auto, 단방향의 경우overflow-y: auto입니다. - 스크롤 연결을 중지합니다.
overscroll-behavior: contain를 추가하면 상자가 끝에 도달해도 페이지가 이어지지 않습니다. 자세한 내용은 아래를 참조하세요.
와이드 테이블은 테이블 자체에 대한 오버플로를 무시하므로 특별한 경우입니다. HTML 테이블 스크롤 만들기는 이를 수정하는 래퍼를 보여줍니다.
Overflow-x와 Overflow-y가 자유롭게 섞이지 않습니다.
overflow는 overflow-x 및 overflow-y의 약어이며 구분할 수 있습니다. 한 가지 문제가 있습니다. 한 축이 hidden, scroll 또는 auto인 경우 다른 축은 visible를 유지할 수 없습니다. 브라우저는 이를 auto로 변경합니다.
따라서 overflow-x: hidden 자체는 요청하지 않은 수직 스크롤바를 상자에 제공하는 경우가 많습니다. 쏟아져야 할 내용물은 이제 상자 안에 갇혀있습니다.
clip는 유사한 규칙을 따릅니다. hidden, scroll 또는 auto 옆에는 hidden가 됩니다. 하지만 visible 옆에 있는 clip는 허용되고 유지됩니다. 따라서 overflow-x: clip는 콘텐츠가 아래로 흘러내리도록 하면서 측면을 자르는 방법이 됩니다.
실행 예제직접 써 보고 코드를 복사하세요
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>overflow-x, overflow-y and clip</title>
<style>
body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; color: #1d2330; background: #f4f5f7; }
h2 { font-size: 15px; margin: 0 0 8px; }
section { background: #fff; border: 1px solid #e1e4ea; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 13px ui-monospace, Consolas, monospace; margin-bottom: 8px; }
select, button { font: inherit; }
.result { font: 13px ui-monospace, Consolas, monospace; background: #1d2330; color: #e5e7eb; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
.result b { color: #fbbf24; }
/* part 1: a box whose tall content should spill down */
#pair { width: 200px; height: 60px; border: 2px solid #2563eb; border-radius: 6px; padding: 6px; font-size: 13px; margin: 8px 0 50px; }
/* part 2: the page-like scroller, and a card with a sticky header inside */
.scroller { height: 190px; overflow-y: auto; border: 2px solid #475569; border-radius: 8px; background: #f8fafc; }
.card { margin: 10px; border-radius: 8px; background: #fff; border: 1px solid #d5d9e0; }
.card.hidden { overflow: hidden; }
.card.clip { overflow: clip; }
.card h3 { position: sticky; top: 0; margin: 0; padding: 8px 10px; font-size: 14px; background: #0f5132; color: #fff; }
.card li { padding: 6px 0; font-size: 13px; }
</style>
</head>
<body>
<section>
<h2>1. Set one axis, the other one changes</h2>
<div class="row">
<label>overflow-x: <select id="ox"><option>visible</option><option selected>hidden</option><option>clip</option><option>scroll</option><option>auto</option></select></label>
<label>overflow-y: <select id="oy"><option selected>visible</option><option>hidden</option><option>clip</option><option>scroll</option><option>auto</option></select></label>
</div>
<div id="pair">Line 1 of the tall content<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>
<div class="result" id="pairOut"></div>
</section>
<section>
<h2>2. A sticky header inside a card with overflow</h2>
<div class="row">
<label><input type="radio" name="c" value="hidden" checked> card: overflow: hidden</label>
<label><input type="radio" name="c" value="clip"> card: overflow: clip</label>
</div>
<div class="scroller" id="scroller">
<div class="card hidden" id="card">
<h3>Sticky header (top: 0)</h3>
<ol><li>Scroll this grey box.</li><li>Row 2</li><li>Row 3</li><li>Row 4</li><li>Row 5</li><li>Row 6</li><li>Row 7</li><li>Row 8</li><li>Row 9</li><li>Row 10</li><li>Row 11</li><li>Row 12</li></ol>
</div>
</div>
<div class="result" id="stickyOut"></div>
</section>
<script>
const pair = document.getElementById('pair');
const ox = document.getElementById('ox'), oy = document.getElementById('oy');
function showPair() {
pair.style.overflowX = ox.value;
pair.style.overflowY = oy.value;
const s = getComputedStyle(pair); // what the browser actually uses
const note = s.overflowY !== oy.value || s.overflowX !== ox.value ? ' <b>changed by the browser</b>' : '';
document.getElementById('pairOut').innerHTML =
'you wrote: x ' + ox.value + ', y ' + oy.value +
'\nbrowser uses: x ' + s.overflowX + ', y ' + s.overflowY + note;
}
ox.addEventListener('change', showPair);
oy.addEventListener('change', showPair);
showPair();
const card = document.getElementById('card'), scroller = document.getElementById('scroller');
const header = card.querySelector('h3'), stickyOut = document.getElementById('stickyOut');
function showSticky() {
// is the header still at the top edge of the grey box?
const gap = Math.round(header.getBoundingClientRect().top - scroller.getBoundingClientRect().top);
stickyOut.textContent = 'scrolled ' + Math.round(scroller.scrollTop) + 'px, header is ' +
(gap >= 0 && gap <= 3 ? 'stuck at the top' : gap < 0 ? 'scrolled out of view' : gap + 'px from the top');
}
document.querySelectorAll('input[name=c]').forEach(r => r.addEventListener('change', () => {
card.className = 'card ' + r.value;
showSticky();
}));
scroller.addEventListener('scroll', showSticky);
showSticky();
</script>
</body>
</html>
숨겨진 vs 클립
두 값 모두 맞지 않는 부분을 잘라내어 동일하게 보입니다. 차이점은 hidden가 여전히 상자를 스크롤 컨테이너로 만든다는 것입니다. 스크롤바는 없지만 스크립트는 scrollTop 또는 scrollIntoView()를 사용하여 스크롤할 수 있으며 하위 동작 방식을 변경합니다.
가장 큰 영향을 받은 어린이는 position: sticky입니다. 고정 요소는 스크롤 컨테이너인 가장 가까운 조상 내부에 달라붙습니다.
overflow: hidden를 카드에 올려놓으면 그 카드가 그 조상이 됩니다. 카드는 스크롤되지 않으므로 헤더에는 달라붙을 것이 없고 페이지와 함께 스크롤됩니다.
overflow: clip는 스크롤 컨테이너를 생성하지 않고 동일한 가장자리를 자르므로 헤더가 실제 스크롤러에 계속 달라붙습니다. CSS 위치는 끈적끈적한 다른 요구 사항을 다룹니다.
오버플로에는 수레가 포함되어 있습니다.
visible 및 clip 이외의 오버플로 값은 새로운 블록 형식화 컨텍스트를 시작합니다. 쉽게 말하면 상자는 독립적인 레이아웃 아일랜드가 됩니다. 두 가지 사항은 다음과 같습니다.
- 플로트가 포함되어 있습니다. 플로트된 하위 항목만 있는 부모는 일반적으로 높이가 0으로 축소됩니다.
overflow: hidden또는auto를 사용하면 포장할 수 있을 정도로 성장합니다. - 여백 누출이 중지됩니다. 자식의 위쪽 여백이 더 이상 부모의 위쪽 가장자리를 통해 축소되지 않습니다.
이것이 overflow: hidden가 고전적인 플로트 수정이 된 이유입니다. 또한 원하지 않는 부작용인 클립도 있습니다. display: flow-root는 아무것도 자르지 않고 동일한 레이아웃 아일랜드를 만듭니다. CSS float는 두 가지를 모두 표시합니다.
overflow: clip는 블록 형식화 컨텍스트를 시작하지 않으므로 부동 소수점을 포함하지 않습니다.
전화 페이지를 옆으로 스크롤하는 항목 찾기
휴대폰에서 페이지가 옆으로 스크롤되면 한 요소가 화면보다 넓습니다. body에서 오버플로를 숨기면 덮어지지만 요소가 여전히 너무 넓고 오른쪽이 잘립니다. 대신 찾아서 고쳐보세요.
데스크톱 브라우저의 개발자 도구에서 페이지를 열고 휴대폰 크기 보기로 전환한 후 콘솔에 붙여넣습니다.
const vw = document.documentElement.clientWidth;
document.querySelectorAll('body *').forEach(el => {
const r = el.getBoundingClientRect();
if (r.right > vw + 1 || r.left < -1) {
console.log(el, Math.round(r.right));
el.style.outline = '2px solid red';
}
});
튀어나온 모든 요소에는 빨간색 윤곽선이 표시됩니다. 가장 바깥쪽이 원인인 경우가 많으며 그 자식도 함께 따라갑니다.
스크롤 래퍼의 넓은 테이블과 같이 의도적으로 스크롤하는 상자 내부의 요소도 나열되며 무시할 수 있습니다.
실행 예제직접 써 보고 코드를 복사하세요
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Find what overflows</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1d2330; background: #f4f5f7; }
.tools { padding: 12px 14px; background: #1d2330; color: #e5e7eb; }
.tools button { font: 600 13px system-ui, sans-serif; padding: 7px 11px; border-radius: 8px; border: 0; margin: 0 6px 6px 0; cursor: pointer; }
#find { background: #fbbf24; color: #1d2330; }
#fix { background: #d6f2df; color: #0f5132; }
#report { font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; margin: 4px 0 0; }
/* a small sample page */
header { padding: 14px 16px; background: #fff; border-bottom: 1px solid #e1e4ea; font-weight: 700; }
main { padding: 14px 16px; }
.card { background: #fff; border: 1px solid #e1e4ea; border-radius: 10px; padding: 12px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
/* three sneaky causes of sideways scrolling */
.promo { width: 100vw; margin-left: 16px; padding: 12px; border-radius: 10px; background: #2563eb; color: #fff; }
.link { font-family: ui-monospace, Consolas, monospace; color: #9a3412; }
.chart { display: block; }
/* the fixes */
.fixed .promo { width: auto; margin-left: 0; }
.fixed .link { overflow-wrap: anywhere; }
.fixed .chart { max-width: 100%; height: auto; }
.flag { outline: 3px solid #dc2626; outline-offset: -3px; }
</style>
</head>
<body>
<div class="tools">
<button id="find">Find wide elements</button><button id="fix">Apply fixes</button>
<div id="report">This page scrolls sideways. Press the yellow button.</div>
</div>
<header>Sample page</header>
<main>
<div class="promo">Promo banner, width: 100vw</div>
<p class="card">Your tracking code: <span class="link">TRK8F14E45FCEEA167A5A36DEDD4BEA2543C9F0AE1B2D7E4F8A0C3B9E1D5F7A2C4E6B8D0F1A3C5E7B9D2F4A6C8E0B</span></p>
<div class="card">
<svg class="chart" width="520" height="90" viewBox="0 0 520 90"><rect width="520" height="90" rx="8" fill="#e0e7ff"/><path d="M10 80 L120 50 L220 60 L330 25 L510 15" stroke="#4f46e5" stroke-width="4" fill="none"/></svg>
</div>
</main>
<script>
// List every element that sticks out past the right or left edge of the viewport.
function findWide() {
const vw = document.documentElement.clientWidth;
const wide = [];
document.querySelectorAll('body *').forEach(el => {
el.classList.remove('flag');
const r = el.getBoundingClientRect();
if (r.right > vw + 1 || r.left < -1) wide.push(el);
});
// keep only the outermost ones: the element that causes it, not its children
const causes = wide.filter(el => !wide.includes(el.parentElement));
causes.forEach(el => el.classList.add('flag'));
const pageWidth = document.documentElement.scrollWidth;
document.getElementById('report').textContent =
'viewport ' + vw + 'px, page ' + pageWidth + 'px\n' +
(causes.length
? causes.map(el => el.tagName.toLowerCase() + '.' + el.classList[0] +
' right edge ' + Math.round(el.getBoundingClientRect().right) + 'px').join('\n')
: 'nothing sticks out');
}
document.getElementById('find').addEventListener('click', findWide);
document.getElementById('fix').addEventListener('click', () => {
document.body.classList.toggle('fixed');
document.getElementById('fix').textContent = document.body.classList.contains('fixed') ? 'Undo fixes' : 'Apply fixes';
findWide();
});
</script>
</body>
</html>
일반적인 용의자와 그에 대한 수정 사항은 다음과 같습니다.
width: 100vw에 여백 또는 패딩이 추가됩니다.100vw는 전체 뷰포트이며 클래식 스크롤 막대가 있는 시스템에서는 스크롤 막대도 포함됩니다.width: auto또는100%를 사용하세요.- 고정 너비의 이미지, 비디오 및 삽입물.
max-width: 100%; height: auto;를 추가하세요. CSS 최대 너비를 참조하세요. - 긴 단어, 링크 및 코드. HTML 단어 구분에서 다루는
overflow-wrap: anywhere를 추가합니다. 끝에 점이 있는 한 줄의 경우 text-overflow: ellipsis를 사용하세요.
뷰포트 메타 태그가 누락되어도 휴대폰에서 페이지가 잘못 표시되지만, 옆으로 스크롤하는 대신 전체 페이지가 축소됩니다.
중첩 스크롤: 오버스크롤 동작
스크롤 패널의 끝으로 스크롤하고 계속 진행합니다. 브라우저는 남은 스크롤을 다음 스크롤러(일반적으로 페이지)로 전달합니다.
이것을 스크롤 체이닝이라고 하는데, 채팅창이나 사이드 메뉴에서는 페이지가 도망간 듯한 느낌이 듭니다.
.chat {
max-height: 60vh;
overflow-y: auto;
overscroll-behavior: contain; /* stop at the end, do not scroll the page */
}
contain는 체인 연결을 중지하고 상자 자체의 바운스 또는 글로우 효과를 유지합니다. none는 둘 다 중지합니다. 속성은 실제로 스크롤되는 상자에서만 중요합니다.
작동하지 않을 때
| 당신이 보는 것 | 원인 | 수정 |
|---|---|---|
overflow: auto에는 스크롤바가 표시되지 않습니다. |
상자에는 높이가 없으며 내용에 따라 커집니다. | height 또는 max-height 추가 |
| 원치 않는 수직 스크롤 막대가 나타납니다. | overflow-x: hidden가 overflow-y를 auto로 바꿨습니다. |
overflow-x: clip 사용 |
| 드롭다운 또는 도구 설명이 잘립니다. | overflow: hidden를 가지는 원조 클립 |
오버플로를 내부 상자로 이동하거나 아래를 참조하세요. |
| 그림자 또는 초점 링이 가장자리에서 잘립니다. | 오버플로 상자는 패딩 가장자리를 지나 모든 내용을 자릅니다. | 오버플로 상자에 패딩 추가 |
position: sticky가 달라붙는 것을 멈췄습니다. |
조상에 overflow: hidden 또는 auto가 있습니다. |
해당 조상에서 overflow: clip를 사용하세요. |
| 휴대폰에서 페이지가 옆으로 스크롤됩니다. | 한 요소가 화면보다 넓습니다. | 위의 스니펫으로 찾아보세요. |
| Flex 또는 그리드 항목 내부의 스크롤 상자는 페이지를 넓힙니다. | 항목의 최소 너비는 기본적으로 콘텐츠 너비로 설정됩니다. | 플렉스 또는 그리드 항목의 min-width: 0 |
| 패널을 스크롤하면 페이지도 스크롤됩니다. | 스크롤 체이닝 | overscroll-behavior: contain |
절대적으로 배치된 드롭다운은 배치된 상위 항목(position: relative 항목)이 오버플로 상자이거나 그 안에 있을 때 잘립니다.
이를 수정하려면 잘린 상자 외부의 요소에 position: relative를 넣거나 페이지 위에 그리는 팝오버 속성이 있는 메뉴를 표시하세요.
링크로 공유하세요
오버플로 문제는 화면 너비에 따라 달라지므로 데스크톱의 스크린샷에는 전화기 사용자가 보는 내용이 거의 표시되지 않습니다. 실제 페이지를 여는 링크를 통해 다른 사람은 크기를 조정하고 스크롤하여 버그나 수정 사항을 직접 확인할 수 있습니다.
페이지를 NOS 문서에 붙여넣고 공유 링크 만들기를 선택합니다. 링크할 HTML이 이를 안내합니다.
페이지는 작성된 대로 렌더링되고 해당 스크립트가 실행되므로 위의 오버플로 파인더는 페이지를 보내는 사람들에게 작동합니다. 나중에 코드를 변경하면 동일한 링크에 새 버전이 표시됩니다.