iframe width: 100% 失效主因是其默认为内联替换元素，不参与父容器内容流撑宽，且父容器若无显式可计算宽度（如flex未设flex:1、float脱离文档流、或缺少width:100%），则百分比无参照；须显式设display:block并确保每层父容器有明确宽度约束。
iframe width: 100% 失效的真正原因
不是写错了，而是 iframe 默认是替换元素（replaced element），它不参与父容器的内容流撑高，也不自动继承父容器的宽度计算上下文。当父容器宽度由内容撑开（比如 display: flex 且未设 width）、或本身是 fit-content 行为时，width: 100% 就会退化为“按自身固有尺寸渲染”，常见表现为只宽 300px 左右（浏览器默认值）。
父容器没显式宽度是最常见坑点
即使你写了 width: 100%，如果它的直接父容器没有可计算的宽度来源，这个百分比就无处可依。尤其在以下场景中极易被忽略：
- Flex 容器子项未设
flex: 1或flex-basis，导致父容器宽度塌缩 - 父容器是
float元素，脱离文档流后包含块变成视口，width: 100%参照的是视口而非你预期的父级 div - 父容器用了
max-width: 1200px但没配width: 100%，子项width: 100%实际算的是 1200px，但若父容器本身没设宽，仍可能 fallback 到内容宽 - 第三方组件（如某些 UI 库的卡片）内联 style 硬编码了
width: auto，覆盖了你的规则
iframe 自身 display 类型必须改
iframe 默认 display: inline，这在 Flex/Grid 布局里会直接破坏拉伸行为。必须显式设为 display: block 或 display: inline-block 才能让 width: 100% 正常参与布局计算：
iframe {
width: 100%;
display: block; /* 关键 */
border: none;
}
另外，别漏掉 box-sizing: border-box —— 如果父容器有 padding 或 border，而你又没重置盒模型，width: 100% + padding 会直接撑出横向滚动条。
响应式下还要防“内容撑破”
就算 width: 100% 生效了，iframe 里嵌的页面如果没做响应式（比如固定写死 width: 1200px），依然会溢出。这时候仅靠父层样式不够，得组合处理：
- 给
iframe加min-width: 100%防收缩（尤其在 Safari 中更稳定） - 确保父容器有
overflow: hidden，避免内部滚动条暴露 - 如果能控制子页，务必在子页
加<meta name="viewport" content="width=device-width"> - 跨域时无法改子页？那就用
transform: scale()+transform-origin强制缩放（慎用，会影响交互精度）
最易被忽略的是：多层嵌套中某一级父容器漏了 width: 100% 或 flex: 1，而你以为它“应该透传”。CSS 宽度不穿透，每一层都得主动声明约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
