Responsively-sized <iframe>

Category: Miscellaneous
Type: New or changed feature
Status: Proposed (Chrome Proposed)
Intent stage: None

Breaking change: No
Enterprise impact: None
Chromium flag: responsive-iframes
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-sizing/responsive-iframe?label=experimental&label=master&aligned

Summary

Allow sites to opt into iframes having responsive sizing (sizing the <iframe> element in the parent document to the iframe document's layout overflow sizing, so that scrolling in the child document is avoided).

Motivation

This is a natural feature to have for iframes, when the site wants to render the iframe content so that it looks seamless with the parent frame and avoids scrollbars.

Standards & signals

Specification: https://drafts.csswg.org/css-sizing-4/#responsive-iframes
Firefox: No signal
Safari: No signal
Web developers: Strongly positive — Plenty of developer demand is expressed in the feature request standards issues: https://github.com/whatwg/html/issues/555 https://github.com/w3c/csswg-drafts/issues/1771 https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md#use-cases https://bsky.app/profile/tunetheweb.com/post/3mlslcsoobs2w
Tracking bug: https://issues.chromium.org/issues/418397278

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-sizing%2Fresponsive-iframe
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Responsively-sized%20%3Ciframe%3E
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Responsively-sized%20%3Ciframe%3E
Baseline status: https://webstatus.dev/?q=Responsively-sized%20%3Ciframe%3E

Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md

View on chromestatus.com