flex子项设width: 100%会锁死弹性行为，覆盖flex-shrink且易因padding/border超限；正确做法用flex: 1或flex: 0 1 auto，并为子项加min-width: 0和box-sizing: border-box（含伪元素），替换元素还需max-width: 100%等约束。
flex子项写width: 100%会锁死弹性行为
在display: flex容器中，子项设width: 100%不是“填满父容器”，而是强制将flex-basis锁定为父内容区宽度。一旦子项自身有padding或border，且box-sizing未生效，总宽立刻超限；更关键的是，它会覆盖flex-shrink的默认收缩能力，导致无法响应父容器缩放。
常见错误现象：input和button并排时按钮被挤到下一行、卡片内表单区域横向滚动、响应式断点后布局错位。
正确做法优先用：flex: 1（等价于flex: 1 1 0%）或flex: 0 1 auto，让浏览器按剩余空间自动分配，而非硬编码百分比。
min-width: 0 是 flex 子项防溢出的必要条件
img、input、textarea、button这些替换元素和表单控件，在 flex 布局中默认带min-width: auto——这是浏览器的保护机制，防止内容（如长 URL、连续无空格文本）被过度压缩。哪怕box-sizing: border-box已生效，这个min-width仍会让它们拒绝收缩。
必须显式覆盖：min-width: 0，否则width: 100%或flex: 1都形同虚设。
无序列表说明：
- 只加
box-sizing: border-box不解决溢出，min-width: auto仍在起作用 -
min-width: 0要加在子项上，不是父容器 - 若子项是
div包裹input，则min-width: 0需加在div上（因它是 flex item） - 多个子项并存时，每个需收缩的 flex item 都得单独加
box-sizing: border-box 的生效必须验证，不能只看代码
写了* { box-sizing: border-box; }不等于所有元素都用了border-box。框架（如 Tailwind）、CSS-in-JS 库、Shadow DOM、甚至浏览器对input的默认样式都可能覆盖它。伪元素::before/::after若漏掉重置，也会悄悄撑开布局。
唯一可信方式：打开开发者工具 → 切到「Computed」面板 → 查目标元素的box-sizing值。如果显示content-box（哪怕只有一条横线划掉你的规则），那width: 100%就一定不包含padding和border。
真正起效的全局写法只有：* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; }，缺一不可。
图片、iframe 等替换元素需额外约束
img、svg、iframe是替换元素，它们不遵循普通盒模型语义：width: 100%和box-sizing对它们基本无效。原始尺寸照常渲染，哪怕父容器只有 200px 宽，一张 800px 的图照样溢出。
必须组合设置：
-
max-width: 100%+height: auto（对img、svg） -
width: 100%+height: auto（对iframe，仅max-width不够） -
display: block（消除img默认 inline 带来的基线间隙干扰） - 若在 flex 容器中，仍需加
min-width: 0（因img默认min-width: auto）
最常被跳过的动作：没进 Computed 面板确认box-sizing，也没给替换元素补max-width和min-width: 0——这两点一漏，再细的 flex 布局也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
