Dropdowns break inside scrollable containers because three browser systems collide: overflow clipping, stacking contexts, and containing blocks. Setting overflow: auto or overflow: hidden on a container clips absolutely positioned descendants, full stop. z-index: 9999 fixes nothing when the real problem is that your dropdown is trapped inside a clipping boundary, not a stacking order fight.
The article walks through four real fixes with code, not theory. React's createPortal escapes the clipping boundary by rendering the dropdown directly to document.body, then uses getBoundingClientRect plus window.scrollY and window.scrollX to calculate position. CSS Anchor Positioning with position-try-fallbacks lets the browser handle coordinate logic and viewport flipping natively, though Firefox still requires the @oddbird/css-anchor-positioning polyfill. The HTML Popover API, now baseline across modern browsers, renders elements in the browser's top layer with no JavaScript positioning at all. Sometimes the fix is just moving the markup outside the scroll container entirely.
The piece is worth reading in full because it explains why position: fixed breaks inside transformed ancestor elements by spec design, meaning no CSS workaround exists. If an animation library wraps your layout in a transformed element, you are back to portals or anchor positioning regardless of what else you try. The accessibility gaps are also covered directly: CSS Anchor Positioning declares a visual relationship only, so aria-controls, aria-expanded, and aria-haspopup remain your responsibility.
[READ ORIGINAL →]