CSS Overflow: Browser Support, Values, Limitations

What is CSS overflow?

CSS overflow is a shorthand property defined in the W3C CSS Overflow Module Level 3. It controls how content that runs past a box's padding edge is shown, clipped, or scrolled. It is shorthand for overflow-x and overflow-y, and accepts visible, hidden, clip, scroll, and auto.

Which browsers does CSS overflow support?

CSS overflow has near-universal browser support. Every shipping desktop and mobile browser supports the property with the visible, hidden, scroll, and auto values, and modern engines also support the newer clip value.

What values does CSS overflow accept?

CSS overflow accepts five keyword values. Each one changes whether the box clips its content, whether scrollbars appear, and whether the box becomes a scroll container.

• visible: The default value. Content that runs past the padding edge is painted outside the box. The box does not become a scroll container, and no scrollbars appear. Setting overflow: visible on a sized box can cause overlapping layouts when text or images are larger than the box.
• hidden: Clips the content at the padding edge and removes scrollbars. The box becomes a scroll container, so the area is still programmatically scrollable through scrollLeft, scrollTop, scrollTo, or scrollIntoView. Use hidden when a script needs to control scroll position without exposing a visible scrollbar.
• clip: Clips the content at the overflow clip edge and blocks programmatic scrolling. The box does not become a scroll container, no scrollbars appear, and the scrolling APIs return without effect. Pair clip with overflow-clip-margin to extend the clip edge by a few pixels.
• scroll: Clips the content and always shows scrollbars, even when the content fits. Use scroll only when you need a stable layout where the scrollbar gutter never collapses, since auto handles the on-demand case better.
• auto: Clips the content and shows scrollbars only when the content overflows. The box becomes a scroll container. auto is the recommended value for most scrollable regions because the scrollbar appears on demand without forcing a permanent track.
• overlay: A legacy WebKit alias for auto that draws scrollbars on top of the content. The CSS Overflow specification removed it; Safari and older Chromium versions still parse it as auto. Use scrollbar-gutter with overflow: auto instead.

What is the difference between overflow-x and overflow-y?

overflow-x and overflow-y are the longhand properties that the overflow shorthand expands into. overflow-x controls horizontal overflow on the inline axis, and overflow-y controls vertical overflow on the block axis. Setting overflow with one value applies that value to both axes; setting it with two values applies the first to overflow-x and the second to overflow-y.

• Mixing visible with a non-visible axis: If overflow-x is visible and overflow-y is auto, hidden, scroll, or clip, the spec computes the visible axis as auto. The same rule applies in the other direction. You cannot let one axis flow freely while the other scrolls.
• Mixing clip with a non-clip axis: If overflow-x is clip and overflow-y is anything other than visible or clip, clip is computed as hidden on the non-matching axis. This is why a card with overflow-x: clip and overflow-y: auto becomes overflow-x: hidden in practice.
• Single-axis scrollbars: Use overflow-x: auto on a wrapper around a wide table or a code block to let only the horizontal axis scroll while the page keeps scrolling vertically. This is the standard pattern for responsive tables.
• Browser support parity: overflow-x and overflow-y ship in the same engines as the shorthand. Chrome 4+, Edge 12+, Firefox 3.5+, Safari 3+, Opera 9.5+, Samsung Internet 4+, and Internet Explorer 8+ all support the longhand properties.

What are the known issues with CSS overflow?

CSS overflow ships in every modern browser, but the way each engine paints scrollbars, handles momentum scrolling, and combines overflow with sticky or transformed children still trips up production sites.

• iOS Safari momentum scroll on overflow: hidden: An element with overflow: hidden on iOS Safari can still respond to programmatic scrolling and to JavaScript scroll calls, even though no scrollbar is visible. Switching the value to overflow: clip blocks the scrolling APIs cleanly because clip removes the scroll-container status by spec.
• Scrollbar gutter shifts the layout: overflow: scroll always reserves space for a scrollbar, and overflow: auto adds the gutter only when content overflows. The on-demand gutter can shift the page layout when content height crosses the threshold. Use scrollbar-gutter: stable on the scrolling element to keep the layout fixed.
• position: sticky breaks under overflow: hidden: A sticky child stops sticking when any ancestor between it and the viewport sets overflow to hidden, scroll, auto, or clip. The sticky element is now positioned relative to that ancestor's scroll container, not the viewport. Audit the ancestor chain before debugging the sticky rule.
• Legacy overflow: overlay is non-standard: overlay was never part of the standard CSS Overflow specification. Safari still parses it as auto, Chromium removed first-class support, and Firefox treats it as auto. Pages that depend on overlay for scrollbar styling should migrate to scrollbar-gutter and scrollbar-color.
• Android Browser 2.1 to 4.3 ignores overflow on small boxes: The legacy Android Browser on Gingerbread through Jelly Bean has long-standing bugs where overflow: auto and overflow: scroll are ignored on inner divs that are smaller than the viewport. Android Browser 4.4 and Chrome for Android fix the behavior.

In my experience, the failure that bites teams the most is the overflow: hidden plus position: sticky combo, where a header that is sticky inside a scrollable card silently stops sticking because a wrapper four levels up has overflow: hidden for an unrelated reason. The fix is to move the sticky element out of the clipping wrapper, not to fight the sticky rule itself.

Citations

All CSS overflow version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Overflow Module Level 3: w3.org/TR/css-overflow-3
• MDN overflow CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow
• MDN overflow-x CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
• MDN overflow-y CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
• MDN overflow-clip-margin CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin
• MDN scrollbar-gutter CSS property: developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
• WebKit feature status, overflow: clip: webkit.org/blog/13152/webkit-features-in-safari-16-0
• Chrome Platform Status, overflow: clip: chromestatus.com/feature/5610771421265920
• Mozilla Firefox 81 release notes: mozilla.org/en-US/firefox/81.0/releasenotes
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support