iframe在flex容器中height: 100%失效的根本原因是父容器高度未显式设定，导致子元素height: 100%计算为0；应改用flex-grow: 1并确保父容器有明确高度（如height: 100vh或min-height: 100vh）。
iframe在Flex容器中height: 100%失效的根本原因
不是Flex没用，而是height: 100%本身依赖父容器有**明确计算高度**——而Flex容器的“高度”若未显式设定（比如只靠flex: 1撑开），其自身高度仍是auto。此时子元素写height: 100%就等于height: 0。
常见错误现象：iframe只显示一条细线、完全不可见、或高度固定为几像素；检查 computed style 会发现它的height确实是0px。
- Flex 容器必须有明确高度来源：要么是
height: 100vh、height: calc(100vh - 60px)，要么是上级 Flex 链中某一级已设flex: 1并能获得实际空间 -
html和body默认无高度，height: 100%在它们身上也无效，需显式声明height: 100%或min-height: 100vh - 避免对 Flex 容器同时设
height: 100%和flex: 1——二者语义冲突，浏览器可能忽略其中一个
正确做法：用flex-grow替代height: 100%
只要父容器是display: flex; flex-direction: column，就别再给iframe写height: 100%。直接让它flex-grow: 1，由 Flex 引擎动态分配剩余空间，不依赖任何百分比高度计算。
使用场景：带固定头部/底部的管理后台、嵌入文档预览页、SaaS 工具内嵌面板。
- 父容器必须设
display: flex; flex-direction: column; height: 100vh（或其它确定高度） - 固定高度元素（如
header）不设flex，只设height: 60px之类 -
iframe所在兄弟元素加flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 务必移除
iframe上所有height、width内联样式或CSS声明，只留flex: 1和border: none等必要样式
移动端iOS Safari的viewport高度抖动问题
即使Flex布局写对了，iOS Safari在地址栏收放时仍会让100vh跳变（比如从667px突变为700px），导致iframe被裁切或留白。这不是bug，是浏览器对“视口”定义的动态调整。
解决方案不是禁用viewport，而是避开vh单位对关键容器的直接依赖：
- 用
min-height: 100vh代替height: 100vh，允许内容撑高但不强制截断 - 对
iframe父容器加overflow: hidden，防止滚动条意外出现 - 若需绝对满屏，改用
position: absolute; top: 0; left: 0; width: 100%; height: 100%，但要确保其包含块（containing block）是position: relative且有明确尺寸 - 避免在
iframe上设sandbox后遗漏allow-same-origin——跨域下contentWindow访问会被拒绝，JS方案失效
跨域iframe内容高度无法自动同步？别硬算
想让iframe高度随子页面内容伸缩？height: 100%和flex-grow都做不到——它们只管“容器空间”，不管“内容实际高度”。这时必须走 JS 通信，但跨域限制极严。
真正可行的路径只有两条：
- 子页面主动发消息：
window.parent.postMessage({ type: 'resize', height: document.body.scrollHeight }, '*')，父页监听message事件并更新iframe.style.height - 双方同域时，可直接读
iframe.contentDocument.body.scrollHeight，但需确保iframe已load完成，且子页未设overflow: hidden - 不要用
setInterval轮询高度——耗性能、易误判、iOS后台标签页会暂停定时器 - 如果子页你无法控制（比如嵌入第三方报表系统），那就老老实实用
flex: 1+overflow: auto，接受内部滚动
最常被忽略的一点：flex布局生效的前提，是父容器的“高度来源”必须干净——不能混用height、min-height、flex三者去争夺同一维度的控制权。一旦开始调试，先清掉所有height相关声明，从min-height: 100vh + flex: 1起步，再逐步加约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
