실행 가능한 CSS 문서: CSS overflow

Q: overflow auto와 scroll은 무엇이 다른가요?

scroll은 콘텐츠가 들어가도 항상 스크롤바 자리를 잡아요. auto는 콘텐츠가 상자보다 클 때만 스크롤바를 보여 주고, 보통은 이게 원하는 동작이에요.

Q: div를 스크롤되게 하려면 어떻게 하나요?

크기를 제한하고 스크롤을 허용해요. max-height: 300px; overflow-y: auto; height나 max-height 제한이 없으면 div는 콘텐츠와 함께 커져서 절대 넘치지 않아요.

Q: overflow-x: hidden이 세로 스크롤바까지 추가하는 이유는 무엇인가요?

한 축이 hidden, scroll, auto이면 다른 축의 visible 값은 auto로 계산돼요. 대신 overflow-x: clip을 쓰세요. 스크롤 컨테이너를 만들지 않고 다른 축은 visible로 남겨 둬요.

Q: 넘치는 텍스트에 말줄임표(...)는 어떻게 넣나요?

한 줄이라면 너비가 제한된 요소에 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;를 쓰세요. 여러 줄이라면 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;을 쓰세요.

overflow가 하는 일

콘텐츠가 상자보다 크면(고정 높이, 긴 단어, 넓은 표) 넘쳐요. overflow 속성은 넘친 부분을 어떻게 할지 정해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

값	보이는 모습	스크롤 컨테이너
`visible` (기본값)	콘텐츠가 상자 밖으로 흘러나와 뒤에 오는 것과 겹쳐요	아니요
`hidden`	padding 가장자리에서 잘리고 스크롤바가 없어요(스크립트로는 스크롤돼요)	네
`clip`	잘리고, 스크립트로도 전혀 스크롤되지 않아요	아니요
`scroll`	콘텐츠가 들어가도 항상 스크롤바를 보여 줘요	네
`auto`	콘텐츠가 들어가지 않을 때만 스크롤바	네

macOS와 휴대폰에서는 스크롤바가 콘텐츠 위에 겹쳐 보이다가 사라져서, 스크롤하기 전까지는 scroll과 auto가 똑같아 보일 수 있어요.

스크롤되는 상자 만들기

상자는 무언가가 크기를 제한할 때만 넘쳐요. height나 max-height에 overflow-y: auto를 더하면 긴 목록이 스크롤 패널이 돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

여기서는 height보다 max-height가 더 좋아요. 짧은 목록은 짧게 남고, 긴 목록만 스크롤돼요. 안에 포커스할 수 있는 콘텐츠가 없는 스크롤 영역에는 tabindex="0"을 줘서 키보드 사용자도 스크롤할 수 있게 하세요.

overflow-x와 overflow-y

두 축은 따로 지정할 수 있어요. 흔한 용도는 넓은 표가 페이지 전체를 넓히는 대신 컨테이너 안에서 옆으로 스크롤되게 하는 거예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

기억할 규칙이 하나 있어요. 한 축이 hidden, scroll, auto이면 다른 축의 visible 값은 auto가 돼요. 그래서 overflow-x: hidden만 써도 예상치 못한 세로 스크롤바가 생길 수 있어요. overflow-x: clip에는 그런 효과가 없어요.

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

말줄임표로 텍스트 자르기

text-overflow: ellipsis는 잘린 줄 끝을 "…"로 바꿔요. 제한된 너비, 줄바꿈되지 않는 텍스트, 숨겨진 overflow 세 가지가 함께 필요해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

-webkit- 접두사가 붙은 line clamp는 Chrome, Firefox, Safari에서 동작해요. 스크린 리더는 여전히 전체 텍스트를 읽어서 잘린 단어를 잃지 않아요.

overflow의 부작용

overflow를 visible이나 clip이 아닌 값으로 지정하면 잘라 내는 것 이상의 일이 생겨요.

float과 자식 margin을 품어요. 요소가 새 블록 서식 맥락을 만들어서 float된 자식을 감싸도록 커져요. display: flow-root는 아무것도 잘라 내지 않고 같은 일을 해요.
그 아래의 position: sticky를 망가뜨려요. sticky 자식은 가장 가까운 스크롤 컨테이너에 붙는데, 그 컨테이너가 스크롤되지 않으면 아무것도 붙지 않아요.
absolute 자식을 잘라 내요(넘치는 요소가 그 자식들의 포함 블록이기도 할 때). 드롭다운과 툴팁도 포함되고, 자식의 box shadow도 잘려요.

스크롤바 숨기기

scrollbar-width: none으로 상자를 스크롤 가능하게 유지하면서 스크롤바만 숨길 수 있어요. 아껴 쓰세요. 스크롤바가 없으면 많은 독자가 콘텐츠가 더 있다는 걸 알아차리지 못해요. scrollbar-gutter: stable은 반대 역할을 해요. 스크롤바 자리를 미리 잡아서 스크롤바가 나타날 때 콘텐츠가 밀리지 않게 해요.

자주 하는 실수

크기 제한 없이 overflow를 기대하기. height나 max-height가 없는 상자는 넘치지 않고 커져요.
가로 스크롤을 "고치려고" body에 overflow: hidden. 대신 너무 넓은 요소를 찾으세요(흔히 고정 width, 긴 URL, 스크롤바가 있을 때의 100vw예요).
white-space: nowrap 없는 말줄임. 텍스트가 줄바꿈되니 가로로 넘치는 게 없고 말줄임표도 나타나지 않아요.
overflow-x: hidden이 세로 스크롤바를 만들기. clip을 쓰세요.
카드에 잘리는 드롭다운. 카드의 overflow: hidden이 잘라 내요. overflow 규칙을 옮기거나 드롭다운을 바깥에 렌더링하세요.

자주 묻는 질문

overflow: hidden은 무엇을 하나요?

요소의 padding 상자 안에 들어가지 않는 콘텐츠를 스크롤바 없이 잘라 내요. 숨겨진 부분은 스크립트로, 또는 안에 있는 무언가에 포커스를 주면 여전히 스크롤될 수 있어요.

overflow auto와 scroll은 무엇이 다른가요?

scroll은 콘텐츠가 들어가도 항상 스크롤바 자리를 잡아요. auto는 콘텐츠가 상자보다 클 때만 스크롤바를 보여 주고, 보통은 이게 원하는 동작이에요.

div를 스크롤되게 하려면 어떻게 하나요?

크기를 제한하고 스크롤을 허용해요. max-height: 300px; overflow-y: auto; height나 max-height 제한이 없으면 div는 콘텐츠와 함께 커져서 절대 넘치지 않아요.

overflow-x: hidden이 세로 스크롤바까지 추가하는 이유는 무엇인가요?

한 축이 hidden, scroll, auto이면 다른 축의 visible 값은 auto로 계산돼요. 대신 overflow-x: clip을 쓰세요. 스크롤 컨테이너를 만들지 않고 다른 축은 visible로 남겨 둬요.

넘치는 텍스트에 말줄임표(...)는 어떻게 넣나요?

한 줄이라면 너비가 제한된 요소에 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;를 쓰세요. 여러 줄이라면 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;을 쓰세요.