Runnable CSS Docs: Overflow

Q: What is the difference between overflow auto and scroll?

scroll always reserves scrollbars, even when the content fits. auto shows a scrollbar only when the content is bigger than the box, which is what you usually want.

Q: How do I make a div scrollable?

Limit its size and allow scrolling: max-height: 300px; overflow-y: auto;. Without a height or max-height limit, the div grows with its content and never overflows.

Q: Why does overflow-x: hidden also add a vertical scrollbar?

If one axis is hidden, scroll or auto, a visible value on the other axis is computed as auto. Use overflow-x: clip instead, which does not create a scroll container and leaves the other axis visible.

Q: How do I add an ellipsis (...) to overflowing text?

For one line: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; on an element with a limited width. For several lines, use display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

What overflow does

When content is bigger than its box (a fixed height, a long word, a wide table), it overflows. The overflow property decides what happens to the extra:

<!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>

Value	What you see	Scroll container
`visible` (default)	Content spills out of the box and overlaps what follows	No
`hidden`	Clipped at the padding edge, no scrollbars (script can still scroll it)	Yes
`clip`	Clipped, and no scrolling at all, even by script	No
`scroll`	Always shows scrollbars, even if the content fits	Yes
`auto`	Scrollbars only when the content does not fit	Yes

On macOS and phones scrollbars overlay the content and fade out, so scroll and auto may look the same until you scroll.

Making a scrollable box

A box overflows only if something limits its size. A height or max-height, plus overflow-y: auto, turns a long list into a scrolling panel:

<!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>

max-height is better than height here: a short list stays short, and only a long list scrolls. A scrollable region that has no focusable content inside should get tabindex="0" so keyboard users can scroll it too.

overflow-x and overflow-y

The two axes can be set separately. The common use is a wide table that scrolls sideways inside its container instead of widening the whole page:

<!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>

One rule to remember: if one axis is hidden, scroll or auto, a visible value on the other axis becomes auto. So overflow-x: hidden alone can give you an unexpected vertical scrollbar. overflow-x: clip does not have that effect:

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

Cutting text with an ellipsis

text-overflow: ellipsis replaces the clipped end of a line with "…". It needs three things together: a limited width, text that cannot wrap, and hidden 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>

The -webkit- prefixed line clamp works in Chrome, Firefox and Safari. Screen readers still read the full text, so the clipped words are not lost to them.

Side effects of overflow

Setting overflow to anything other than visible or clip changes more than clipping:

It contains floats and child margins. The element forms a new block formatting context, so it grows to wrap floated children. display: flow-root does the same without clipping anything.
It breaks position: sticky below it. A sticky child sticks to the nearest scroll container; if that container does not scroll, nothing sticks.
It clips absolutely positioned children (when the overflowing element is also their containing block), including dropdowns and tooltips, and it clips box shadows of children too.

Hiding the scrollbar

You can keep a box scrollable while hiding its scrollbar with scrollbar-width: none. Use it sparingly: without a scrollbar, many readers do not realize there is more content. scrollbar-gutter: stable does the opposite job: it reserves the scrollbar's space so content does not shift when a scrollbar appears.

Common mistakes

Expecting overflow without a size limit. A box with no height or max-height grows instead of overflowing.
overflow: hidden on body to "fix" horizontal scroll. Find the element that is too wide instead (often a fixed width, a long URL, or 100vw with a scrollbar).
Ellipsis without white-space: nowrap. The text wraps, so nothing overflows horizontally and no ellipsis appears.
overflow-x: hidden creating a vertical scrollbar. Use clip.
A dropdown cut off by its card. The card's overflow: hidden clips it; move the overflow rule or render the dropdown outside.

Frequently Asked Questions

What does overflow: hidden do?

It clips content that does not fit inside the element's padding box, with no scrollbars. The hidden part can still be scrolled to by script or by focusing something inside it.

What is the difference between overflow auto and scroll?

scroll always reserves scrollbars, even when the content fits. auto shows a scrollbar only when the content is bigger than the box, which is what you usually want.

How do I make a div scrollable?

Limit its size and allow scrolling: max-height: 300px; overflow-y: auto;. Without a height or max-height limit, the div grows with its content and never overflows.

Why does overflow-x: hidden also add a vertical scrollbar?

If one axis is hidden, scroll or auto, a visible value on the other axis is computed as auto. Use overflow-x: clip instead, which does not create a scroll container and leaves the other axis visible.

How do I add an ellipsis (...) to overflowing text?

For one line: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; on an element with a limited width. For several lines, use display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Related concepts