overlay-bounds sets zero minimum inline size, limits maximum width to the
viewport minus 2rem and maximum height to the dynamic viewport minus 2rem,
and allows contained scrolling. Dropdowns, popovers, and tooltips can reuse
this sizing fragment.
<section aria-label="More information" class="overlay-bounds focus-ring w:[16rem] max-w:100% p:4" tabindex="0">
<h2>More information</h2>
<p>Long content can scroll inside this surface.</p>
</section>The focusable, named region in this example gives keyboard users a way to scroll its content. Apply a focus indicator and test it after choosing a surface color. If a surface contains controls that already provide a suitable keyboard path, evaluate whether the extra tab stop is needed.
The shortcut does not position an overlay, detect collisions, dismiss it, return focus, or supply a backdrop or paint. Native popovers and dialogs can own some of those behaviors; a custom floating layer needs explicit application logic. The viewport bound is a maximum, so a component may set a smaller width or height.
Content spacing
overlay-content is a flex column with gap:4 and p:4. These spacing
values follow Standard’s --spacing scale. It does not supply a width,
surface, visibility, or scroll container.
<div class="popover">
<button type="button" popovertarget="overlay-details">Details</button>
<div id="overlay-details" class="popover-content p:0 gap:0" popover>
<div class="overlay-content">
<h2 class="popover-title">Project details</h2>
<p class="popover-description">Content spacing inside a native popover.</p>
</div>
</div>
</div>When the outer native panel already owns padding, choose one spacing owner:
reset that panel with p:0 gap:0 before adding the inner fragment. If an
application’s viewport already supplies padding, use overlay-content p:0
inside it. Preserve the owner’s width deduction, scrolling, and panel
placement; replacing layout fragments must not change how closed content
is hidden or focus is restored.