frame-sizing で iframe を中身の高さに合わせる

どんな時に使う？

コメント欄・SNS 埋め込み・可変高さのウィジェットを iframe で載せるとき。従来は埋め込み側で高さを測り postMessage → 親が iframe の height を書き換えるパターンが定番だったが、CSS と meta のオプトインでブラウザに任せられる。

コード／手順

親ページでは iframe に frame-sizing: content-height を指定する。埋め込みドキュメント側は読み込み前から meta でオプトインする（動的追加では効かない）。

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

<iframe class="embed" src="/comments.html" title="コメント"></iframe>

埋め込み側（/comments.html）:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

クロスオリジンでは許可オリジンを絞る:

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

内容が後から増減する場合（「もっと見る」など）は、埋め込み側で変更後に window.requestResize() を呼ぶ。

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  if ("requestResize" in window) {
    window.requestResize();
  }
}

段階的強化の例:

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

• 主な値: auto（従来どおり） / content-height / content-width / content-block-size / content-inline-size。横書きでは高さ合わせに content-height か content-block-size が使いやすい。
• max-height: 80vh など他の制約と併用できる。

注意点・対応状況

• Chrome 154+ で利用可。他エンジンは未サポートのため @supports と固定高さフォールバックを推奨（2026-10 時点）。
• 埋め込みドキュメントの読み込み後にレイアウトが伸びると CLS の原因になりうる。ファーストビュー内の埋め込みは特に注意。
• ブラウザは埋め込み内のあらゆるレイアウト変化を常時監視しない。動的更新後は requestResize() が必要。呼び出しタイミングは変更完了後・レイアウト前が推奨（リサイズループ防止）。
• 第三者ウィジェットでは allow-origins を必要なオリジンに限定する（frame-ancestors など既存の埋め込み制御と併用）。

出典

• @ChromiumDev · 2026-10-14
• 解説記事: developer.chrome.com