Skip to main content
Lightning Jar - Web Studio Lightning Jar Wordmark

Findings No. 9

An anchor-positioned popover's max-height should be a percentage, not a viewport length

With position-area, the containing block is the grid area beside the anchor, so max-height: 100% clamps to the available space while 100vh runs off the screen.

Stem Shovel Browser Platform verified Chromium with CSS anchor positioning

With CSS anchor positioning, a popover placed by position-area gets the grid area beside its anchor as its containing block, and that changes what max-height means. max-height: 100% clamps the popover to the space actually available beside the button, and overflow-y: auto scrolls the rest. A viewport length like calc(100vh - 2rem) lets a menu opened low on the page run off the bottom of the screen, where a position: fixed popover cannot be scrolled into view by the user, and where Playwright cannot scroll it into view either, so tests go blind in exactly the case users hit.

The rule: inside an anchored popover, size against the containing block (percentages), not the viewport.

Receipt: Stem Shovel's song actions menu (2026-10-20).

Ask Eljay

Ask about the studio's work, research, packages, or writing. A few starters:

Answers come from this site's own content and link their sources. For anything that matters, email hello@lightningjar.com.