iframe在flex容器中height:100%失效，根本原因是其默认display:inline且父容器未设显式高度；需同时满足html/body设高、父容器flex布局有效、iframe设flex-grow:1+min-height:0+display:block。
Flex容器中iframe height: 100% 失效的真正原因
不是CSS写错了，而是iframe默认的display是inline，在Flex布局里它不会自动拉伸——哪怕父容器设了flex-grow: 1，iframe仍按其固有行为（比如150px默认高）渲染。更关键的是，height: 100%在Flex子项中只对“有明确高度来源”的元素生效，而iframe的父容器若没显式设高（比如height: 100vh），100%就无处可依。
用flex-grow让iframe填满剩余空间的实操要点
必须同时满足三个条件，缺一不可：
-
html和body都设height: 100%或height: 100vh，否则整个Flex链高度丢失 - 包含iframe的直接父容器设
display: flex; flex-direction: column;，且该容器自身高度要能撑开（比如用flex: 1或height: 100%） - iframe本身设
flex-grow: 1+min-height: 0（IE/Edge老版本必须加，否则不收缩）+border: none; display: block;
示例结构：
<header>导航栏</header><main style="flex: 1; display: flex; flex-direction: column;"><iframe src="https://example.com" style="flex-grow: 1; min-height: 0; border: none; display: block;">
</iframe>
</main>
为什么scrollHeight方案在Flex布局里容易失效
当用JS读取iframe.contentDocument.body.scrollHeight并赋给iframe.style.height时，会直接破坏Flex流：iframe从“弹性项”变成“固定高块级元素”，导致父容器不再触发flex-grow计算，后续内容可能溢出或留白。尤其在动态内容（如折叠菜单、分页）场景下，手动设height会让Flex布局退化成传统定位。
更稳妥的做法是：只用Flex控制容器级高度分配，把内容高度变化交给iframe内部滚动（设overflow: auto）或用postMessage跨域通信更新style.height——但此时必须同步移除flex-grow，避免冲突。
兼容固定头部+动态内容的最小安全配置
如果你的页面有固定header、可变高aside，又想iframe占满剩余区域，别碰height: 100%嵌套，直接用calc()兜底：
- 给iframe父容器设
height: calc(100vh - 64px)（64px是header高度） - iframe自身用
height: 100%; display: block;，不依赖Flex - 需要响应header高度变化？监听
window.resize并重算calc()值，比轮询scrollHeight更轻量
Flex + iframe自适应真正的复杂点不在代码行数，而在「谁负责滚动」——你得明确决定：是让整个页面滚动（此时iframe必须用flex-grow + min-height: 0），还是只让iframe内部滚动（此时放弃flex-grow，改用height: 100%配合父容器高度约束）。混用两种逻辑，必出滚动条嵌套或高度塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
