Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly

This article explains why dropdown menus break inside scrollable containers and offers practical solutions rooted in understanding three browser systems.

• •overflow: hidden/scroll/auto clips absolutely positioned descendants, even if they are not the containing block — clipping and positioning are separate systems
• •Stacking contexts (created by opacity, transform, filter, will-change, etc.) trap z-index comparisons internally, making z-index: 9999 ineffective when the context itself paints below another
• •Containing blocks cause absolutely positioned dropdowns to drift on scroll because coordinates are calculated relative to a positioned ancestor, not the viewport
• •Portals (React createPortal / document.body.appendChild) move the dropdown outside the problematic ancestor tree, eliminating clipping and stacking context issues entirely