flex-grow: 1 对 iframe 无效是因为父容器无显式高度且 iframe 不参与内容撑高；需为 iframe 的直接父容器设 flex: 1 和 min-height: 0，并确保其有可计算高度来源（如 100vh），iframe 自身设 width/height: 100%。
为什么 flex-grow: 1 对 iframe 无效
直接给 iframe 设 flex-grow: 1 常常没反应，不是语法错，而是它卡在了“父容器没高度”和“iframe 自身不参与内容撑高”两个硬限制上。Flex 子项要靠 flex-grow 拉伸，前提是交叉轴（垂直方向）有剩余空间可分；而 iframe 默认是替换元素，其固有尺寸不随父容器自动扩展，也不会像 div 那样把子内容高度“冒泡”上来。
必须先确保父容器有可计算高度
Flex 容器本身若高度为 auto，flex-grow 就无处发力。这不是 bug，是 CSS 计算逻辑决定的：没有基准高度，就无法分配“剩余空间”。
- 删掉所有
height: 100%的尝试——它在父级无显式高度时算出 0px，还会禁用align-items: stretch - 给 Flex 容器设明确高度来源：
height: 100vh、min-height: 100vh或height: calc(100vh - 60px)（减去 header 高度） - 如果容器嵌套在另一个 Flex 里，且该上级也是子项，记得加
min-height: 0，否则现代浏览器会默认设min-height: auto，阻断向下传递拉伸能力
给 iframe 父容器设 flex: 1，而不是 iframe 自己
iframe 元素本身不响应 flex-grow 的拉伸行为，真正该设 flex: 1 的是它的**直接父容器**（比如一个 div）。这个父容器负责占位、拉伸，并把空间传给 iframe。
- 结构建议：
<div class="iframe-wrapper"><iframe src="..."></div> - CSS：
.iframe-wrapper { flex: 1; min-height: 0; } iframe { width: 100%; height: 100%; } - 关键点：
min-height: 0必须加在 wrapper 上，否则它作为 Flex 子项会被浏览器默认限高，导致height: 100%失效 - 避免对
iframe直接写align-self，它会覆盖容器的align-items: stretch，让拉伸彻底失效
iframe 内容高度变化时，flex-grow 不会自动重算
Flex 布局是静态计算的，iframe 里加载完或点击菜单后内容变高，父容器不会感知，更不会重新分配空间。这时候 flex-grow: 1 已经“做完事了”，再怎么等也没用。
立即学习“前端免费学习笔记（深入）”；
- 动态场景下，不能只靠 CSS：需 JS 监听子页面高度变化，例如用
postMessage接收子页发来的scrollHeight - 简单 fallback：设
iframe { min-height: 500px; }，至少保底不塌陷 - 慎用
overflow: hidden在 wrapper 上——它可能截断 iframe 内容，且掩盖了真实高度问题
实际最易忽略的是嵌套层级中某一层漏了 min-height: 0，或者误以为 height: 100% 能穿透多层 Flex 向下传递。它不能，每一层都得主动“松开”高度限制。
