v153 · html · css · shipped

Responsively-sized <iframe>

A browser-native mechanism that lets an <iframe> automatically size itself to match the intrinsic height of its embedded document — without scrollbars, JavaScript resize observers, or wrapper hacks — by combining a new CSS property on the embedding side with an opt-in meta tag in the embedded document. Ships in Chrome 153.

at a glance

Shipped in	Chrome 153 (desktop, Android, WebView)
Status	Enabled by default
Spec	CSS Sizing Level 4 — Responsive iframes
Explainer	css-sizing-4 responsive-iframes-explainer.md
ChromeStatus	5108373464547328 — Responsively-sized <iframe>

why it exists

Embedding a third-party widget or a self-contained page in an <iframe> almost always requires workarounds to avoid scrollbars: the padding-bottom percentage hack, ResizeObserver inside the iframe sending postMessage to the parent, or server-side knowledge of the content height. None of these are reliable across all content types, and the postMessage approach requires cooperation between two independent codebases.

The responsively-sized iframe feature provides a declarative, standards-based alternative. The iframe element automatically shrinks or grows to fit its content at load time — no scripting required on either side.

Source: css-sizing-4 responsive-iframes-explainer.md.

double opt-in

Both sides must opt in — the embedding document and the embedded document — before the feature activates. This protects cross-origin privacy: neither party can measure the other's content without explicit consent.

embedding document: the CSS property

/* In the embedding page's stylesheet */
iframe.auto-height {
  frame-sizing: content-height;
  width: 100%;
}

Setting frame-sizing: content-height on the <iframe> element tells the browser to size the element's height based on the embedded document's natural (intrinsic) height once loaded.

embedded document: the meta tag

<!-- In the embedded document's <head> -->
<meta name="responsive-embedded-sizing">

The embedded document opts in by including this meta tag. The tag must be present when the load event fires for the sizing to take effect.

end-to-end example

<!-- embedding page -->
<!doctype html>
<html><head>
  <style>
    .widget-frame {
      frame-sizing: content-height;
      width: 100%;
      border: 1px solid #ccc;
    }
  </style>
</head><body>
  <iframe class="widget-frame" src="https://widget.example.com/"></iframe>
</body></html>


<!-- embedded document: widget.example.com -->
<!doctype html>
<html><head>
  <meta name="responsive-embedded-sizing">
  <style>body { margin: 0; }</style>
</head><body>
  <p>Widget content that determines the iframe height.</p>
  <p>More content here.</p>
</body></html>

The iframe renders without a fixed height and without scrollbars. Its height matches the widget's layout overflow height at load time.

behaviour and constraints

Behaviour	Detail
Timing	One-shot at load time only. Subsequent content changes do not trigger re-sizing, preventing layout loops and performance issues.
Direction	Height sizing only. Width is still controlled by the embedding document as normal.
Cross-origin	Works across origins — both parties must opt in explicitly.
Fallback	If the embedded document does not include the meta tag, the iframe falls back to its normal (scrollable) behaviour; `frame-sizing` has no effect.
Meta timing	The meta tag must be present in the document at the time the `load` event fires. Dynamically adding it afterwards does not activate the feature.