What to do when child content exceeds the container is an unavoidable question in layout. overflow decides whether overflowing content is shown, clipped, or turned into a scrollable region — and it quietly triggers an important side effect: creating a new block formatting context (BFC).
The Values of overflow
Value
Effect
visible (default)
Overflowing content is shown as usual; nothing is clipped and no scrollbar appears
hidden
Overflowing content is clipped and invisible, and cannot be reached by scrolling
scroll
Always shows a scrollbar (even when content does not overflow), and clips overflowing content
auto
Shows a scrollbar only when content overflows; the most commonly used value
clip
Like hidden, but forbids programmatic scrolling (e.g. scrollTo) and performs better
overflow: auto in action
This is a long enough piece of text to overflow the container's height, demonstrating how overflow: auto only shows a scrollbar when content overflows — keep scrolling down to see all of it. One more sentence to make it long enough.
Controlling Each Axis
overflow is the shorthand for overflow-x and overflow-y, letting you control the two directions separately:
.gallery {
overflow-x: auto; /* horizontally scrollable, often used for image galleries */overflow-y: hidden; /* clips vertically, no vertical scrollbar */white-space: nowrap;
}
NoteAs long as one direction is not visible, the other is automatically computed as auto even if you set it to visible — browsers do not allow "one direction clipped while content can still overflow freely past the clip in the other".
overflow and BFC
Giving a container any overflow value other than visible/clip makes it a new block formatting context (Block Formatting Context). This was one of the earliest, most common "clear floats" techniques — once the parent triggers a BFC, it correctly wraps the height of the floated children inside it. For the full list of BFC triggers and float layout, see 6.5 Floats and BFC.
.clearfix-legacy {
overflow: hidden; /* triggers a BFC so the parent's height wraps the floated children again */
}
overscroll-behavior
Controls whether scrolling is "propagated" to the parent or the whole page once the container's edge is reached — the typical case is preventing a popup's inner scroll from triggering the page behind it after reaching the bottom (commonly called "scroll chaining").
.modal-body {
overflow-y: auto;
overscroll-behavior: contain; /* once the edge is reached, scrolling is no longer propagated to the page */
}
scrollbar-gutter and Scrollbar Layout Shifting
When content changes make an overflow: auto container flip between "with scrollbar" and "without scrollbar", non-overlay scrollbars (such as the Windows default) occupy layout space and make the content jitter sideways. scrollbar-gutter can reserve that space in advance:
.list {
overflow-y: auto;
scrollbar-gutter: stable; /* always reserves its width whether or not a scrollbar appears */
}
Stacking Context Cheat Sheet
For the full explanation of z-index and stacking contexts, see 6.1 The Box Model and Positioning. Here is a quick-reference list of common triggers that create a new stacking context:
position is relative/absolute/sticky/fixed with an explicit z-index (not auto).
opacity is less than 1.
transform, filter, or perspective is set to something other than none.
will-change specifies any of the properties above.
A child of a flex/grid container whose z-index is not auto.
isolation: isolate — changes no visual effect; its only job is to explicitly create a new stacking context, often used to isolate a component's internal z-index so it cannot affect the rest of the page.
Common Pitfalls
Setting overflow: hidden on a popup/drawer to clip content, but accidentally clipping a child's box-shadow or tooltip — for visual effects that "overflow but must stay visible", consider isolating overflow with an extra wrapper layer.
Forgetting that overflow: hidden creates a BFC, so children that were designed to "overflow visibly" get clipped unexpectedly.
Brute-forcing a layering problem with a huge z-index (e.g. 9999) without realizing the real cause is an ancestor that created a restrictive stacking context.