A modal body's 70vh scroll container clips options a headless dropdown already rendered

The browser paints a native select's dropdown as its own layer, not as part of your page boxes, so no ancestor's overflow can clip it ^[1]. The same arrangement keeps most of the parts a developer wants to style outside CSS's reach ^[2], and MDN says as much when it calls the element hard to style consistently across browsers ^[3]. According to MDN's customizable-select docs, the practice for years was appearance: none plus styling whatever CSS could still touch, and the customizable version is still landing as an experimental feature, Chrome, 2025 ^[4].

A headless Listbox trades that layer away. In the dev.to example the options panel is an ordinary element with position absolute, z-index 50, a 15rem max height and its own overflow-auto ^[5]. Ordinary elements get painted under every ancestor's clip.

MDN's wording for the auto value is short: "Overflow content is clipped at the element's padding box. When overflowing, the element box is a scroll container displaying scroll bars." ^[6] Two jobs in one sentence. The first draws a clip edge at the padding box, and anything painted past that edge is not drawn at all; the second adds a scrollbar when the element's in-flow content is taller than the box ^[7]. hidden and scroll clip as well, the newer clip value clips and forbids all scrolling including programmatic, and visible is the only value that does not clip ^[8].

In-flow is the word that decides this case. An absolutely positioned element is out of flow ^[9]. The panel never adds to the in-flow height that would produce a scrollbar, and the clip edge applies to it anyway, so there is nothing to scroll and nothing painted past the edge ^[10].

This is why the z-index experiment failed. Raising it to 9999 produced the same paint ^[12], because z-index orders painting within a stacking context and does not move the clip edge ^[15]. The inspector still listed all three options ^[13].

The clip edge belongs to .modal-body, which sets max-height: 70vh and overflow-y: auto ^[14]. Setting that overflow to visible restores the paint and removes the scrollbar the height cap exists to produce ^[16]. The alternative is to keep the scroll and stop painting the panel inside that box.

For the failure to reproduce in your own layout, two things have to hold: the panel resolves its position inside a scroll container, and an ancestor's overflow is set to something other than visible ^[18]. Both are ordinary in a modal wrapped around a long form. The walkthrough introduces three companions holding one piece of the answer each, and the published text breaks off in the middle of the second, before it names a fix ^[17].