如何基于iframe内容高度自适应设置Flexbox高度（非JS方案）

我有一个横向排列的flex容器，包含三个子元素，其中第二个子元素内嵌了iframe。现在flex容器的高度由另外两个子元素的最大高度决定，但我希望它能根据iframe源内容的自然高度自适应，同时不显示滚动条。由于iframe内容可能动态变化，且嵌入文档和主文档不一定同域，无法用JavaScript获取嵌入文档的尺寸。

现有代码 #

HTML #

<div class="elements">
  <div class="element-1">...</div>
  <div class="element-2">
    <div>A label</div>
    <iframe src="..."></iframe>
  </div>
  <div class="element-3">...</div>
</div>

CSS #

.elements {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.element-1 {
    width: min-content;
    flex: 0 0 auto;
}
.element-2 {
    flex: 1 0 auto;
    display: grid;
    grid-template-rows: 1.1em 1fr;
}
.element-2 > iframe {
    width: 100%;
    align-self: stretch;
}
.element-3 {
    flex: 0 0 auto;
}

核心疑问 #

浏览器如何确定未显式设置高度的iframe的高度？

解决方案与解释 #

一、调整Flex布局，让容器高度跟随iframe内容 #

当前align-items: stretch会强制所有flex子元素拉伸至容器高度，而容器高度默认由最高子元素决定。要让容器高度由iframe所在的element-2主导，需修改以下CSS：

1. 修改flex容器的对齐方式，避免子元素强制拉伸：

.elements {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* 替换原stretch，子元素按自身高度排列 */
}

2. 调整element-2的grid布局，让iframe自适应内容高度：
   将grid行的1fr改为auto，同时给iframe设置height: fit-content，让其高度跟随嵌入文档的自然内容高度：

.element-2 {
    flex: 1 0 auto;
    display: grid;
    grid-template-rows: 1.1em auto; /* auto让行高随内容变化 */
}
.element-2 > iframe {
    width: 100%;
    height: fit-content; /* 让iframe高度适配内部内容 */
    border: none; /* 可选，移除iframe默认边框 */
}

二、浏览器对未设高度iframe的高度计算规则 #

• 默认高度：如果完全不设置iframe的高度，浏览器会使用内置默认值（多数主流浏览器为150px）。
• 内容自适应逻辑：当给iframe设置height: fit-content时，浏览器会直接根据嵌入文档的自然内容高度计算iframe高度——这个过程是浏览器层面的布局计算，不需要JS参与，因此不受跨域限制影响。
• 前提条件：嵌入文档本身的根元素（html/body）需要是自适应内容高度的，即嵌入文档没有设置固定高度、没有overflow: hidden等限制内容高度的样式。

注意事项 #

• 若嵌入文档自身设置了固定高度，iframe的fit-content会被该固定高度限制，无法自适应内容。
• 如果iframe出现滚动条，需检查嵌入文档是否有overflow: auto或固定高度的CSS设置。

内容的提问来源于stack exchange，提问作者Steve W