Dynamic content needs reserved space

What it is

Dynamic content changes a container’s used size. If that size is not in the constraint set before first layout, the box collapses around empty content and then expands when bytes arrive. Reserved space means writing aspect-ratio, min-height, a fixed slot, or an equivalent constraint so the first layout already contains the final geometry. The second layout then paints inside a box instead of reflowing neighbors. What is reserved is geometry, not a decorative skeleton style.

Why it happens

By default a block’s height is content-sized. With no children the used height is zero or border-box collapse; when children arrive, used height jumps and every later box that depends on that height translates. Reservation turns the eventual height into a constraint up front: derive height from a known width via aspect-ratio, floor it with min-height, or occupy the largest plausible discrete size. The two layout trees then agree near the insertion point; what arrives late is pixels, not a box.

Under-reservation still expands on arrival. Over-reservation leaves empty space. Empty space is a stable gap; expansion is a shift. The engineering bias is to keep a stable gap rather than grow into an already-painted flow—unless the product explicitly accepts that jump.

Where it stops holding

Content whose height is unbounded and can differ by a viewport (infinite timelines, long user text) cannot be nailed with one min-height. Put the variable region in its own scroller so outer page height is not bound to inner growth. Absolutely positioned overlays do not consume flow height, so reservation does nothing for them. A page whose HTML arrives complete and never grows asynchronously already has final layout on the first pass; reservation is a no-op. Print and fixed-canvas export that lay out final content also have nothing “late” to reserve for.

Applying it

• Put width and height or aspect-ratio on ads, embeds, and async cards in markup; do not let the box learn its size after decode.
• For discrete bars (promo, notice), set min-height to the height they have when present, and keep that slot even when absent, instead of growing from zero.
• If a skeleton or color block is used, its outer box must equal the final content box—not a thin spinner line.
• Verify by stalling the slot’s request: compare rectangles from first paint with those after arrival; nodes after the insertion point should keep their coordinates.

Related

• Same group: R3.05.1 Late-arriving content pushes already laid-out nodes · R3.05.2 Displacement causes misclicks · R3.05.4 Render-blocking resources determine the first visible moment · R3.05.5 Already-interactive regions must not be reflowed by late content · R3.05.6 Async inserts should occupy positions that do not interrupt reading
• Adjacent: I2.01 Choosing skeleton versus spinner · R3.07 Image and Media Optimization
• Search terms: aspect-ratio · reserved space · min-height