iframe在flex容器中width:100%不生效的根本原因是其作为替换元素默认按固有尺寸渲染，且flex子项默认min-width:auto锁定最小宽度；必须显式设置min-width:0并确保父容器宽度明确，否则width:100%被忽略。

iframe在Flex容器中width:100%不生效的真正原因

不是CSS写错了，而是iframe作为替换元素，默认按固有尺寸渲染，且flex布局不会自动将父容器宽度约束传递给它。哪怕父容器设了display: flex和width: 100%，iframe仍可能卡在默认宽（如300px）或撑破容器。

必须加min-width: 0才能让width生效

Flex子项默认有min-width: auto，这会锁死最小宽度，导致width: 100%被忽略。解决方法是显式解除这个限制：

• iframe自身必须设min-width: 0（横向布局时）
• 如果iframe被包在一层div里，而该div是Flex子项，那div也要加min-width: 0
• 仅设flex-shrink: 0没用——那是阻止收缩，不是放开宽度下限

父容器宽度未定义是常见硬伤

Flex容器若自身width为auto（比如嵌套在float、position: absolute或未设宽的div里），width: 100%就无参照可依。此时会出现：

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

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

下载

• iframe横向滚动或右侧被裁切
• 开发者误以为是iframe问题，实际是上层容器漏了width: 100%或max-width: 100%
• 在Element UI/Ant Design等组件中嵌iframe时尤其明显，因为其内部容器常未透出宽度

video和iframe的处理逻辑本质相同但容易混淆

很多人查video自适应方案后照搬到iframe，结果失效。关键区别在于：

• video可通过aspect-ratio + width: 100%实现比例缩放，但iframe内容不可控，aspect-ratio只推算高度，不读取真实内容高度
• 对iframe直接设aspect-ratio在Safari 15.3及更早版本中被忽略，回退到150px默认高
• 真正可靠的宽度控制，始终依赖：父容器有明确宽度 + iframe设width: 100% + min-width: 0 + display: block

最易被跳过的其实是嵌套层级中某一层漏了min-width: 0，或者误以为width: 100%能穿透多层Flex自动生效——它不能，每一层都得手动“松开”宽度锁。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！