Responsively-sized <iframe>

at a glance

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.

Syntax and double opt-in

/* 1. Embedding side: CSS property definition */
iframe {
  frame-sizing: auto | content-width | content-height | content-block-size | content-inline-size;
}

<!-- 2. Embedded side: HTML document opt-in meta tag -->
<meta name="responsive-embedded-sizing" content="allow-origins=*">

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" content="allow-origins=*">

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.

Inputs and outputs

Inputs: On the parent element, frame-sizing accepts keywords: auto (default static fallback sizing), content-height (or logical content-block-size), and content-width (or logical content-inline-size). On the embedded document, the <meta name="responsive-embedded-sizing"> accepts an optional content attribute such as allow-origins=* or a list of authorized embedding origins.

Outputs: When both opt-ins match at document load time, the browser computes the embedded document's layout overflow rectangle and overrides the iframe element's natural dimension on the opted-in axis. This eliminates vertical scrollbars within the iframe while preventing arbitrary script-driven frame oscillation.

Errors and lifecycle

Errors: If either side omits the opt-in, or if the embedded meta tag specifies origin restrictions that do not include the embedding parent origin, the browser silently ignores frame-sizing and falls back to standard replaced-element dimensions (300px × 150px) with scrollbars. No JavaScript errors or CSS parse exceptions are thrown, adhering to standard CSS resilient fallback rules.

Lifecycle: Responsive sizing is evaluated strictly one-shot at the completion of the child document's load event. Subsequent DOM mutations or style shifts inside the iframe do not trigger re-sizing, precluding layout cycles and Cumulative Layout Shift (CLS) regressions.

Examples

The following end-to-end example illustrates the required cooperative markup on both the embedding parent and the embedded child document:

<!-- 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" content="allow-origins=*">
  <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

browser compatibility

The page previously asserted this feature shipped in Chrome 153 (and noted 150 in earlier tables). However, when queried on 2026-10-07, the authoritative ChromeStatus API record (feature 5108373464547328) lists status as Proposed with target desktop milestone 154 under Intent to Ship. Standard engine positions are recorded below:

security and privacy

• Cross-origin dimension protection: Sizing an iframe to match child content naturally conveys the child content's height to the embedding page. The <meta name="responsive-embedded-sizing"> opt-in ensures child documents explicitly authorize this disclosure.
• Origin restrictions: Embedded documents can restrict responsive sizing to specific allowed origins using the content="allow-origins=..." attribute on the meta tag.
• CSP frame-ancestors: Site operators can restrict embedding contexts using the Content-Security-Policy: frame-ancestors directive, adding defense-in-depth against unauthorized embedders.
• Fenced frames exclusion: Fenced frames are excluded from responsive iframe sizing to preserve strict cross-site privacy boundaries.

see also

• CSS Sizing Level 4 — Responsive iframes
• css-sizing-4 responsive-iframes-explainer.md (explainer)
• MDN: <iframe> element
• chromestatus.com — Responsively-sized <iframe> (5108373464547328)