Overflow and scrolling

What counts as overflow?

Overflow happens when an element's content is bigger than the box that holds it. Two things usually cause it. Either you fixed the box's size, with a height, max-height or width, and put more inside than fits. Or the content cannot shrink: a long URL with no spaces, a wide image, a table, or a line of nowrap text.

By default the browser does not hide anything. The content keeps going past the box's edge and paints over whatever comes next, while the box itself stays the size you set. That is why text sometimes overlaps the section below it: the paragraph is taller than a fixed height, and the next section starts where the box ends, not where the text ends.

Often the right fix is to remove the fixed size and let the box grow. Reach for the overflow property when the box really must stay a certain size, such as a scrolling sidebar or a cropped thumbnail.

What do visible, hidden, scroll and auto do?

The overflow property takes four main keywords. visible is the default: content spills out and is painted outside. hidden clips the content at the padding edge and hides the rest. scroll clips it and always shows scrollbars, even when nothing overflows. auto clips it and shows a scrollbar only when one is needed.

For anything readers must be able to reach, use auto. It makes the element a scroll container that works with the mouse wheel, touch, and the keyboard once focused. scroll leaves empty scrollbar tracks on Windows when the content fits, which looks broken. Keep hidden for cases where the clipped part is decoration, such as an image that is larger than its frame on purpose or the rounded corners of a card.

Be careful with hidden on text. If a translated label or a larger user font size makes the text longer, the end of it disappears with no way to read it. Clipping text is only acceptable with a visible signal, such as an ellipsis, and a way to see the full value.

.ride-list {
  max-height: 240px;
  overflow: auto;
}

.thumb {
  height: 120px;
  overflow: hidden;
}

How do overflow-x and overflow-y differ?

The shorthand overflow sets both directions. overflow-x controls the horizontal axis and overflow-y the vertical one, and overflow: hidden auto sets x first then y. A wide data table inside a card wants overflow-x: auto so it scrolls sideways while the card grows normally in height.

There is one surprise. If one axis is visible and the other is not, the browser changes visible to auto. You cannot have content spill out sideways while it scrolls vertically. If you set overflow-x: hidden to stop a sideways spill, you have also made the element scroll vertically when its height is limited, and its position: sticky children now stick inside it instead of the page.

.table-wrap {
  overflow-x: auto;
}

When should you use overflow: clip?

The value clip hides overflowing content like hidden, with two differences. It does not make the element a scroll container, so nothing can scroll it, not even script. And because it is no scroll container, sticky children inside still stick to the page. Pair it with overflow-clip-margin to let content spill a little before it is cut, for example to keep a focus ring visible.

Use clip when you want to trim decoration, such as a rotated ribbon on a card corner, without the side effects of hidden. It has been supported in all current browsers since 2022.

.card {
  overflow: clip;
  overflow-clip-margin: 4px;
}

How do you cut long text with an ellipsis?

A single-line ellipsis needs three declarations working together. white-space: nowrap keeps the text on one line. overflow: hidden clips what does not fit. text-overflow: ellipsis replaces the clipped end with "…". Leave out any one and nothing happens. The element must also have a limited width, which block elements get from their container.

Inside a flex row, a truncating item also needs min-width: 0, because flex items refuse by default to shrink below the width of their content. Without it the text pushes the row wider and never gets clipped. This catches almost everyone the first time.

For a multi-line limit, line-clamp with a number of lines is supported across current browsers using the prefixed form: display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: 3 and overflow: hidden. Whichever version you use, give readers the full text somewhere, for example in the linked page or a title attribute, and never truncate something people must read in full, like a price or a date.

.ride-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

How do you stop long URLs and words breaking the layout?

The browser wraps text at spaces and hyphens. A long URL, an email address, a file name or a German compound word has none, so it stays on one line and pushes out of its box. On a 340px phone, a single pasted link in a comment can make the whole page scroll sideways.

Add overflow-wrap: anywhere to text that might contain long strings, such as comments, cards and chat messages. Normal text still wraps at spaces, and only a string too long for the line is broken, at any character. The older value overflow-wrap: break-word breaks the same way but does not let the word shrink a flex item or table cell, so anywhere is the more reliable choice in modern layouts. word-break: break-all breaks every word at the line end, even short ones, which makes ordinary prose ugly.

For long words in running text, hyphens: auto with a correct lang attribute on the page adds real hyphens. It does not help URLs.

.comment,
.card {
  overflow-wrap: anywhere;
}

What makes a good scroll container?

Any element with overflow set to auto, scroll or hidden is a scroll container. For a scrolling panel to work, the element must have a limited size: a height or max-height, or a flex or grid parent that constrains it. Without a limit the box grows to fit and there is nothing to scroll.

Keyboard users need to reach it. Chrome and Firefox make scroll containers focusable automatically when they have no focusable children, but Safari does not, so add tabindex="0" and an accessible name such as aria-label="Ride list" to a scrolling region of plain text.

Two newer properties improve the feel. overscroll-behavior: contain stops scroll chaining: when the panel reaches its end, the page behind does not start scrolling. It suits chat panes, menus and modals. scrollbar-gutter: stable reserves room for the scrollbar even when the content fits, so the content does not jump sideways when the list grows long enough to need one. Both are supported in all current browsers; scrollbar-gutter reached Safari in late 2024.

.chat {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

Why does the whole page scroll sideways, and how do you find the cause?

A horizontal scrollbar on the page means some element is wider than the viewport. The usual causes: a fixed width in pixels larger than a phone screen; width: 100vw, which includes the vertical scrollbar on desktop and is slightly too wide; an unbreakable URL; an image without max-width: 100%; a negative margin or a transform that moves something past the edge; or padding added to width: 100% without border-box.

To find it, open DevTools, switch on device mode at 320px, and scroll sideways to see what sticks out. Firefox marks the culprit with a scroll or overflow badge in the Inspector. In any browser, a temporary * { outline: 1px solid red; } draws every box without changing sizes, and the one reaching past the edge stands out.

Resist the quick fix of body { overflow-x: hidden; }. It hides the symptom, can cut off real content, and breaks position: sticky. If you must clip the page edge, overflow-x: clip on the wrapper does less damage, but fixing the wide element is the real answer.

When you review AI-generated CSS, look for 100vw widths, fixed pixel widths above 320px, and overflow: hidden on large wrappers. Each is a common source of hidden bugs.

/* Temporary debugging only */
* {
  outline: 1px solid red;
}

Field notes

• Overflow happens when content is bigger than the box holding it.
• overflow can show, clip or scroll content that doesn't fit.
• An ellipsis needs nowrap, overflow: hidden and text-overflow together.
• Long URLs have no spaces, so they need permission to break anywhere.

Easy to get wrong

An ellipsis only appears on a single clipped line. Without nowrap and overflow: hidden nothing is cut, so no dots.

Hiding page overflow masks the real cause and can break sticky headers. Find the wide element and fix that.

scroll shows empty scrollbar tracks on some systems even when everything fits. auto shows them only when needed.

100vw includes the vertical scrollbar on desktop, so the element ends up a little wider than the page and causes sideways scroll.

Questions people ask

Why does my sticky header stop sticking?

An ancestor has overflow set to hidden, auto or scroll, which makes it the scroll container the header sticks to. Use overflow: clip there, or remove it.

Can I style scrollbars?

Yes, a little. scrollbar-color and scrollbar-width work in all current browsers. Keep scrollbars visible and with clear contrast.

Does overflow: hidden clear floats?

It does, as a side effect of creating a new formatting context. display: flow-root does the same job without clipping anything.

Why does my flex item text not truncate?

Flex items default to min-width: auto, so they will not shrink below their content. Add min-width: 0 to the item that holds the text.