Responsively-sized <iframe>

concepts

1. Live Resize Demo

   A pair of iframes side-by-side: one fixed-height (the old behaviour) and one opted-in to responsive sizing. Adjust the content height slider to watch the responsive iframe grow and shrink with its content while the fixed one clips or scrolls.

2. Opt-in Mechanism

   Step-by-step walkthrough of the opt-in attribute and the HTTP response header that must be set on the embedded document. Compares the old postMessage-based workaround with the new declarative approach.

3. postMessage Comparison

   Two panels: a working old-style postMessage resize simulation (ResizeObserver on the child, message handler on the parent) vs the new allow-responsive-sizing + Supports-Responsive-Sizing: 1 approach. Add items and watch both panels grow — one via an 80ms simulated round-trip, one instantly as the browser propagates layout overflow with no script.

4. Accordion Embed

   A simulated FAQ accordion embedded as an iframe. The old approach clips content because the height is fixed; the new approach tracks accordion expand/collapse exactly — the iframe grows and shrinks with the content, zero JavaScript on either side.

5. Cross-Origin Simulation

   Walk through each step of the cross-origin resize flow — the six-step postMessage + ResizeObserver approach versus the three-step declarative approach. Run both side by side and see an animated trace with timing. Includes a comparison table covering script requirements, origin validation, layout sync, and fallback behaviour.

6. Dynamic Content Feed

   A social feed widget that grows as posts load — the canonical use case for responsive iframe sizing. Left panel: fixed-height iframe that clips content and forces a scrollbar inside the embed. Right panel: responsive iframe that grows with each new post, letting the parent page scroll naturally. An adjustable post-addition delay and a resize event log show lag introduced by the postMessage round-trip that native resize propagation eliminates.

   Interactive Social embed UX

why it shipped

Embedding third-party or same-origin content in an <iframe> has always forced developers to pick a fixed height upfront or implement a fragile cross-frame messaging contract. The postMessage workaround — where the child posts its scrollHeight and the parent resizes the element — requires script on both sides, breaks across origins without a cooperative server, and fires before the layout is fully settled. Chrome 150 adds a declarative opt-in: the embedded document signals consent via an HTTP header, the embedder opts in via an element attribute, and the browser handles the plumbing. The result is reliable, synchronised resizing that works with CSS-driven dynamic content changes without any JavaScript on either side.

key API surface

• Embedder attribute: <iframe allow-responsive-sizing> (or the equivalent IDL property)
• Embedded document opts in via: Supports-Responsive-Sizing: 1 response header
• The browser propagates layout overflow dimensions from the embedded document to the <iframe> element box in the parent
• Works cross-origin when the embedded origin sends the opt-in header

references

• ChromeStatus entry
• MDN — <iframe> element