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或远小于预期。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 检查父容器Computed中的width和height是否为具体数值（如400px或100vh）
• 避免用max-width限制父容器，它会干扰flex-basis: 100%的计算
• 响应式场景下，flex-basis: calc(100% - 20px)比纯百分比更可靠

图片类内容撑开iframe宽度时，min-width:0是关键开关

iframe内部若有长URL、无空格文本或未约束的，其默认min-width: auto会强制撑开整个iframe——表面看是“iframe变宽”，实际是子内容把它的基础尺寸顶上去了。这时只调iframe本身的CSS没用。

• 在iframe的src页面内，对可能溢出的元素加min-width: 0
• 若无法改内嵌页，可在外层包一层
  ，设overflow: hidden + width: 100%
• 慎用全局* { min-width: 0 }，按钮、表单控件可能因此变形

真正卡住宽度计算的，往往不是iframe本身，而是它内部内容触发的min-width: auto兜底逻辑——这个值不显式覆盖，任何外部flex设置都只是在给一个“已经撑开”的盒子做无效分配。