flex-grow: 1对iframe无效，是因为iframe是替换元素不参与内容撑高，且父容器无显式高度导致无剩余空间可分配；须将flex: 1和min-height: 0设在iframe的直接父容器上，并确保整条高度链有明确来源（如100vh）。
Flex子项里的iframe不撑高，不是iframe写错了，而是父容器没高度、iframe又不参与内容撑高——这两个硬限制卡死所有flex-grow: 1尝试。
为什么flex-grow: 1对iframe完全无效
直接给iframe加flex-grow: 1没反应，是因为：
-
iframe是替换元素，默认尺寸固定（150px 高），不会像div那样把子内容高度“冒泡”上来 - Flex 的交叉轴拉伸需要父容器有**可计算的高度来源**；如果父容器高度是
auto，flex-grow就无处分配空间 - 给
iframe设height: 100%反而会失效：当父级无显式高度时，100%算出0px，还禁用align-items: stretch
必须设flex: 1的是iframe的直接父容器，不是iframe自己
真正该承担拉伸职责的是包裹iframe的那个div（或其他块级容器）：
- 给这个父容器设
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 同时加
min-height: 0——否则现代浏览器默认min-height: auto，会阻断向下传递拉伸能力 -
iframe自身只需width: 100%; height: 100%，它会填满已拉伸好的父容器 - 如果父容器嵌套在另一个 Flex 里（比如整个页面是
html → body → .container → .iframe-wrapper），每一层都得检查是否设了min-height: 0
父容器必须有明确高度来源，不能靠“继承”或“%”糊弄
没有高度基准，Flex 就没法算“剩余空间”。常见可靠写法：
立即学习“前端免费学习笔记（深入）”；
-
height: 100vh（整屏高） -
min-height: 100vh（更安全，防内容少时塌陷） -
height: calc(100vh - 64px)（减去 header 固定高度，适用于有顶部导航的布局） - 避免
height: 100%嵌套：只要中间某一层没显式高度，整条链就断掉，算出0px
移动端或内容动态变化时，纯 CSS 方案必然失效
如果 iframe 内容会折叠/展开、图片懒加载、软键盘弹出，或者你希望它精确贴合底部（而非留白或裁剪）：
- CSS 的
aspect-ratio、padding-bottom、transform: scale()都不读取真实内容高度，只是“假装自适应” - 同源时必须用 JS：
iframe.onload后读contentDocument.body.scrollHeight，并做Math.max(..., 300)兜底和iframe.style.height = ''清空重设 - 跨域时只能靠
postMessage，且event.origin必须严格校验，不能写'*' - 定时轮询（如
setInterval）虽能应对高度收缩，但性能差、易误判，仅作保底
最容易被忽略的点是：min-height: 0必须加在**每一层 Flex 子项容器**上，而不仅是最终那个.iframe-wrapper；另外，scrollHeight在子页body有默认margin时会多出 8–16px，CSS 方案对此完全无解。
