Finally, sensible iframes: Chrome 154 adds frame-sizing support

Remember that endless workaround with <iframe>: you load a third-party block, and it ends up with an annoying internal scrollbar?

And off we go: attach listeners, send postMessage() from the embedded document to its parent, measure heights with JS, and manually change the container’s styles… Forget all that! Chrome 154 now has native support for Responsive Iframes 🚀

How does it work?

An <iframe> can now automatically resize to fit the content inside it.

On the parent website: Set the new CSS property frame-sizing:

.embed-iframe {
  width: 100%;
  frame-sizing: content-height;
}

On the embedded page: The embedded document must explicitly allow resizing through a meta tag:

<meta name="iframe-sizing" content="allow-origins=*" />
<!—- или —->
<meta name="responsive-embedded-sizing" content="allow-origins=https://example.com" />

Dynamic content

The browser does not continuously track every DOM change inside the frame, to avoid performance degradation. So if, for example, an accordion expands or new comments load inside the frame, the embedded page can call:

window.requestResize();

And the parent frame will instantly recalculate the height!

A couple of caveats

Don’t forget Cumulative Layout Shift: if the frame is above the fold, dynamically changing its height can shift content and hurt your Core Web Vitals metrics.
Since the feature is still new, you can easily add it as a progressive enhancement with @supports (frame-sizing: content-height) and fall back to good old JS.