iframe在flex容器中width失效的根源是其默认display: inline，导致不参与flex主轴尺寸计算；必须显式设display: block才能激活flex行为，否则width: 100%等样式均无效。
iframe在flex容器中width失效的根源是display:inline默认值
浏览器给iframe设了display: inline，它在flex主轴上不参与尺寸计算——哪怕你写了width: 100%或flex: 1，它也只按固有宽高（通常约300×150px）渲染。父容器的flex-basis、flex-shrink全被绕过，宽度自然“算不准”。
必须显式设置display:block才能激活flex行为
不加display: block，iframe就卡在inline流里，flex规则对它基本无效。加上后，它才真正成为flex子项，能响应flex-grow、flex-basis和min-width等控制。
-
iframe必须加display: block，不能只靠width: 100% - 若同时设
flex: 1，需确认父容器主轴方向为row且有足够剩余空间 - IE11/Edge旧版还需加
min-width: 0，否则flex-shrink: 1仍不生效
width百分比失效常因父容器高度/宽度未显式约束
iframe的width: 100%不是相对于父容器可视区，而是相对于其**计算出的主轴尺寸**。如果父容器是display: inline-flex、浮动、或height: auto，这个“100%”就失去参照，结果可能为0或远小于预期。
- 检查父容器Computed中的
width和height是否为具体数值（如400px或100vh） - 避免用
max-width限制父容器，它会干扰flex-basis: 100%的计算 - 响应式场景下，
flex-basis: calc(100% - 20px)比纯百分比更可靠
图片类内容撑开iframe宽度时，min-width:0是关键开关
iframe内部若有长URL、无空格文本或未约束的<img alt="为什么CSS flex子项中的iframe会导致宽度计算异常？" >，其默认min-width: auto会强制撑开整个iframe——表面看是“iframe变宽”，实际是子内容把它的基础尺寸顶上去了。这时只调iframe本身的CSS没用。
立即学习“前端免费学习笔记（深入）”；
- 在
iframe的src页面内，对可能溢出的元素加min-width: 0 - 若无法改内嵌页，可在外层包一层
<div>，设<code>overflow: hidden+width: 100% - 慎用全局
* { min-width: 0 }，按钮、表单控件可能因此变形
真正卡住宽度计算的，往往不是iframe本身，而是它内部内容触发的min-width: auto兜底逻辑——这个值不显式覆盖，任何外部flex设置都只是在给一个“已经撑开”的盒子做无效分配。
