iframe在Flex容器中异常拉高或压扁的根本原因是其作为替换元素默认min-height: auto且display: inline，在align-items: stretch下浏览器按150px兜底；需同时满足html/body设height: 100%、父容器为flex且有可信高度、iframe设flex-grow: 1 + min-height: 0 + display: block + border: none。
为什么iframe在Flex容器里会莫名被拉高或压扁
根本原因不是iframe“不听话”，而是它作为替换元素（replaced element），默认min-height: auto，且display: inline。在align-items: stretch（Flex默认）下，它既不会自动填满高度，也不会老实按内容撑开——浏览器按150px兜底，再叠加父容器无显式高度，就出现塌陷、溢出或双滚动条。
必须同时满足的三个布局前提
只给iframe加flex-grow: 1没用，得从整条渲染链上卡死：
-
html和body都设height: 100%或height: 100vh，否则Flex链高度源头就断了 - 包含
iframe的直接父容器必须是display: flex且自身有可信高度（比如flex: 1或height: 100%） -
iframe本身要写全：flex-grow: 1+min-height: 0+display: block+border: none
flex-shrink: 0和flex-grow: 1不能共存
想让iframe“固定比例又自适应”？别这么想。一旦设flex-shrink: 0，它就拒绝压缩，但flex-grow: 1又要求它扩张——两者冲突，浏览器通常以flex-shrink: 0为准，结果是iframe撑破容器或横向溢出。真实场景中：
- 需要等高填充剩余空间 → 用
flex-grow: 1; min-height: 0; - 需要保持原始宽高比（如嵌入视频）→ 改用
aspect-ratio+width: 100%+height: auto，并确保父容器是display: block而非flex - 需要完全禁用伸缩 → 用
flex: none，但必须同步加max-width: 100%和height: auto防撑破
JS动态设高在Flex里反而会破坏布局
用iframe.contentDocument.body.scrollHeight读取高度再赋值给iframe.style.height，等于手动把弹性项变成固定高块级元素。后果是：
立即学习“前端免费学习笔记（深入）”；
- 父容器不再触发
flex-grow计算，后续子项可能留白或溢出 - 内容动态加载（如分页、折叠菜单）后高度变化，JS不重算就会截断
- 跨域时
contentDocument直接不可读，方案彻底失效
真正稳定的做法是放弃JS设高，转而用CSS约束：外层加overflow: auto，iframe内页面自己控制滚动，或者用postMessage由子页主动上报高度（仅限同源或可信跨域）。
