v152 · HTML · Live Resize Demo

Live Resize Demo

Drag the slider to change the number of content blocks in the embedded document. The responsive iframe grows with its content; the fixed-height iframe clips it.

Chrome 152 required for native responsive sizing. The child document is served with the required Supports-Responsive-Sizing: 1 header. In browsers without native support, this page labels and applies a postMessage fallback so the demo remains inspectable.
Iframe IDL support: checking Child response header: checking Responsive panel mode: checking

live demo

3

Fixed height (150 px)

Old behaviour — content overflows or scrolls at the fixed boundary.

fixed 150 px

Responsive sizing

Chrome 152 — the iframe grows to fit its content automatically.

allow-responsive-sizing

code

<!-- Embedder: opt in with the attribute -->
<iframe src="child.html" allow-responsive-sizing></iframe>

<!-- Child document: sends Supports-Responsive-Sizing header (set server-side) -->
<!-- HTTP response header on child.html: -->
<!-- Supports-Responsive-Sizing: 1 -->

<!-- That's all — no JavaScript required on either side -->

see also