Responsively-sized <iframe>

The CSS frame-sizing property (e.g. content-height) lets an <iframe> element be sized to the layout intrinsic size of its embedded document. This avoids scrollbars inside the iframe so the embedded content looks seamless with the parent page. The embedded document must also opt in with <meta name="responsive-embedded-sizing">.

Spec: CSS Box Sizing Module Level 4 §5.3 / Chrome Platform Status: Responsively-sized <iframe>

→ Legacy hacks used before this feature (postMessage, etc.)

1. frame-sizing: content-height (responsive)

The height stays auto and follows the embedded document's content. Use the buttons inside to add or remove content: the embedded document calls window.requestResize() so the height is recalculated.

2. Traditional <iframe> (for comparison)

With the same content but no frame-sizing, the iframe keeps a fixed height and shows a scrollbar when the content overflows.

How it works

Embedding page (parent)

Set frame-sizing on the <iframe> and let its block size be auto so it follows the content. 

<iframe src="frame.html"></iframe>

<style>
  iframe {
    frame-sizing: content-height;
    height: auto;
  }
</style>

Embedded document (child)

Opt in with a <meta> element in the <head>. It must appear before the <body> opens. 

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing">
  </head>
  <body>
    <!-- content -->
  </body>
</html>

Re-measuring after dynamic changes

The intrinsic size is captured on load. When the embedded document changes its own content later, it asks the parent to re-measure by calling window.requestResize(). 

// inside the embedded document
function onContentChanged() {
  // ...update the DOM...
  window.requestResize();
}