CSS Overflow Hidden Not Working — Fix (2026) | Tutorials Logic

Why is Overflow Hidden Not Working?

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.

Common Symptoms:
Content still visible outside container • Fixed elements ignoring overflow • Scrollbar still appearing

Common Causes

Child has position: fixed — fixed elements escape overflow: hidden
Overflow applied to wrong element (parent vs grandparent)
Child has transform creating a new stacking context
Overflow on body/html not working as expected
Using overflow: hidden to clear floats (use clearfix instead)

Quick Fix (TL;DR)

Quick Solution

/* ❌ 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 */

Common Scenarios & Solutions

Scenario 1: Fixed Child Escaping Container

Problem

/* ❌ position: fixed is relative to viewport, not parent */
.modal-container { overflow: hidden; }
.modal { position: fixed; top: 0; left: 0; } /* Ignores overflow! */

Solution

/* ✅ 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); }

Scenario 2: Clearing Floats

Problem

/* ❌ Container collapses with floated children */
.container { /* No height — collapses! */ }
.child { float: left; height: 200px; }

Solution

/* ✅ 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; }

Scenario 3: Prevent Page Scroll

Solution

/* ✅ 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 */
}

Scenario 4: Image Overflow in Card

Solution

/* ✅ 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 */
}

Best Practices to Avoid This Error

Know that fixed children escape overflow: hidden - Use transform or clip-path instead
Use overflow-x and overflow-y separately - More precise control
Use clip-path for complex clipping - More powerful than overflow
Prefer flexbox over floats - Avoids the need for overflow: hidden clearfix
Test on mobile - overflow: hidden on body can cause scroll issues on iOS
Use object-fit for images - Better than overflow for image sizing
Check parent chain - Overflow must be on the right ancestor

Related Issues

Key Takeaways

overflow: hidden clips content that extends beyond the element's bounds
position: fixed children always escape overflow: hidden — they're relative to the viewport
Use transform: translateZ(0) on the parent to contain fixed children
overflow: hidden on a float container clears the floats (establishes BFC)
Use overflow-x and overflow-y separately for more precise control
clip-path is more powerful than overflow for complex clipping shapes