The overflow: hidden property clips content that overflows an element's box:
.container {
width: 200px;
height: 100px;
overflow: hidden;
}
If content inside .container exceeds 200×100px, the excess is clipped. No scrollbars appear. The content is simply hidden.
Basic Overflow Behavior
Without overflow, content overflows visibly:
<div class="box">
This is a very long piece of text that will extend beyond the box boundaries.
</div>
.box {
width: 100px;
height: 50px;
border: 1px solid black;
}
The text extends beyond the box. It's visible but outside the border.
Adding overflow: hidden clips it:
.box {
width: 100px;
height: 50px;
border: 1px solid black;
overflow: hidden; /* Text is clipped */
}
The Clearfix Use Case
Before flexbox and grid, floating elements caused layout problems. Floats don't expand their parent's height:
<div class="container">
<div class="float">Floated content</div>
</div>
.float {
float: left;
}
.container {
border: 1px solid black;
}
The container's height collapses to zero because the float is removed from normal flow. The border wraps around nothing.
overflow: hidden fixes this by creating a new block formatting context (BFC), which contains floats:
.container {
overflow: hidden; /* Container now wraps the float */
border: 1px solid black;
}
This was a common clearfix technique. Modern layouts use flexbox or grid instead, but you'll still see it in legacy code.
Block Formatting Context
Setting overflow to anything other than visible creates a BFC. This has several effects:
- Contains floats (as shown above)
- Prevents margin collapse with children
- Isolates the element from external floats
Example of margin collapse prevention:
<div class="parent">
<div class="child">Content</div>
</div>
.child {
margin-top: 20px;
}
Without overflow: hidden on parent, the child's top margin "escapes" and pushes the parent down. With overflow: hidden, the margin stays inside the parent.
Side Effect: Clipping Positioned Elements
Absolutely positioned children are clipped if they overflow:
<div class="parent">
<div class="child">I extend beyond parent</div>
</div>
.parent {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
}
The child extends beyond the parent's bounds but is clipped by overflow: hidden. This affects dropdowns, tooltips, and popovers that need to escape their containers.
Solution: Use overflow: visible (default) or move the positioned element outside the overflow container.
Side Effect: Hidden Focus Outlines
Focus outlines extend beyond element bounds. overflow: hidden clips them:
.container {
overflow: hidden;
}
.button {
outline: 2px solid blue; /* Outline may be clipped */
}
This is an accessibility issue. Users navigating by keyboard need visible focus indicators. If overflow: hidden clips outlines, keyboard users can't tell where focus is.
Solution: Add padding to the container or use outline-offset to keep outlines inside bounds.
Side Effect: Scroll Blocking
overflow: hidden on <body> or <html> prevents scrolling:
body {
overflow: hidden; /* Page can't scroll */
}
This is used for modal overlays to prevent background scrolling:
/* When modal opens */
document.body.style.overflow = 'hidden';
/* When modal closes */
document.body.style.overflow = '';
But it causes layout shift if the scrollbar disappears. Add padding to compensate:
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.paddingRight = `${scrollbarWidth}px`;
document.body.style.overflow = 'hidden';
overflow: clip vs overflow: hidden
CSS introduced overflow: clip as an alternative:
.container {
overflow: clip;
}
Both clip content, but clip doesn't create a BFC. Use clip when you only want clipping, not the BFC side effects.
Browser support for clip is newer (2021+). Check compatibility before using.
Text Truncation with Ellipsis
overflow: hidden is part of the classic single-line text truncation pattern:
.truncate {
white-space: nowrap; /* Prevent wrapping */
overflow: hidden; /* Hide overflow */
text-overflow: ellipsis; /* Show ... */
width: 200px;
}
All three properties are required. Missing any one breaks the effect.
Horizontal vs Vertical Overflow
You can control axes independently:
.container {
overflow-x: hidden; /* Clip horizontal overflow */
overflow-y: scroll; /* Allow vertical scrolling */
}
Or use the shorthand:
overflow: hidden scroll; /* x y */
Image Cropping
overflow: hidden crops images combined with object-fit:
.image-container {
width: 200px;
height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover; /* Crop to fill container */
}
The image is cropped to the container size.
Debugging Hidden Content
When content disappears unexpectedly, check for overflow: hidden on parent elements. Browser DevTools highlight overflow in the layout panel.
Temporarily set overflow: visible to see what's being clipped:
.debug {
overflow: visible !important;
}
Performance
overflow: hidden can improve performance by preventing the browser from painting content outside the clip region. This is minor but can help with complex layouts or animations.
Alternatives
Modern CSS provides better solutions for some use cases:
Clearfix: Use flexbox or display: flow-root instead:
.container {
display: flow-root; /* Creates BFC without side effects */
}
Clipping: Use clip-path for complex shapes:
.clipped {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
Scroll locking: Use overscroll-behavior to prevent scroll chaining without hiding scrollbars.
Further Reading
MDN's guide to overflow covers all values and behaviors.
The block formatting context article explains BFC creation and effects in detail.
Rachel Andrew's CSS Overflow And Data Loss discusses overflow behavior and accessibility.
overflow: hidden is simple but has reach beyond clipping. Understanding its side effects prevents layout surprises.
0 comments