The overflow: hidden property clips content that extends beyond an element's bounds. However, it doesn't work in all situations "” particularly with position: fixed children, elements that create new stacking contexts, or when the overflow is on the wrong element.
/* ❌ Fixed child escapes overflow: hidden */
.container { overflow: hidden; }
.child { position: fixed; } /* Ignores overflow! */
/* ✅ Use clip-path for fixed children */
.container { clip-path: inset(0); }
/* ✅ Or change fixed to absolute */
.container { position: relative; overflow: hidden; }
.child { position: absolute; } /* Respects overflow *//* ❌ position: fixed is relative to viewport, not parent */
.modal-container { overflow: hidden; }
.modal { position: fixed; top: 0; left: 0; } /* Ignores overflow! *//* ✅ Use transform on parent to contain fixed children */
.modal-container {
transform: translateZ(0); /* Creates containing block for fixed */
overflow: hidden;
}
/* ✅ Or use clip-path */
.modal-container { clip-path: inset(0 round 8px); }/* ❌ container collapses with floated children */
.container { /* No height "” collapses! */ }
.child { float: left; height: 200px; }/* ✅ overflow: hidden clears floats */
.container { overflow: hidden; }
/* ✅ Modern clearfix */
.container::after {
content: '';
display: table;
clear: both;
}
/* ✅ Best: Use flexbox instead of floats */
.container { display: flex; }/* ✅ Prevent body scroll (e.g., when modal is open) */
body.modal-open {
overflow: hidden;
}
/* ✅ Prevent horizontal scroll */
body {
overflow-x: hidden;
}
/* ✅ Note: overflow-x and overflow-y are separate */
.container {
overflow-x: hidden; /* Only hide horizontal overflow */
overflow-y: auto; /* Allow vertical scroll */
}/* ✅ Clip image to card with border-radius */
.card {
border-radius: 12px;
overflow: hidden; /* Clips image corners */
}
.card img {
width: 100%;
height: 200px;
object-fit: cover; /* Fill without distortion */
}position: fixed elements are positioned relative to the viewport, not their parent. They escape overflow: hidden. Use transform: translateZ(0) on the parent to create a containing block for fixed elements.
Add overflow-x: hidden to the body or html element. Check for elements wider than the viewport using browser DevTools. Common culprits: wide images, negative margins, or elements with explicit widths.
overflow: hidden (with any value other than visible) establishes a Block Formatting Context (BFC). A BFC contains its floated children, preventing container collapse.
overflow: hidden itself doesn't create a stacking context. But it does clip content, which can make elements appear to be behind others. Check z-index separately.
Add overflow: hidden to the body element when the modal opens, and remove it when it closes. In JavaScript: document.body.style.overflow = "hidden". On iOS, you may also need position: fixed on the body.
Explore 500+ free tutorials across 20+ languages and frameworks.