答案是必须显式设置min-width: 0。flex子项默认min-width: auto会阻止width: 100%生效，导致横向滚动；该属性须加在需收缩的flex直接子项上，嵌套flex容器也需逐级设置，且需配合max-width: 100%、flex: 1 1 0等确保缩放与布局正确。
flex子项设了width: 100%却横向滚动，先查min-width
这不是width写错了，而是min-width: auto在捣鬼。Flex子项默认min-width: auto（尤其img、input、textarea），它会阻止收缩到比内容更小的宽度，哪怕你写了width: 100%，浏览器也优先尊重这个最小宽度限制。
解决方法很简单：显式加min-width: 0。它告诉浏览器“允许我缩到0”，为width: 100%真正生效腾出空间。
-
min-width: 0必须加在flex子项上，不是父容器 - 如果子项本身是flex容器（比如嵌套卡片），内层也要加
min-width: 0 - 不要只靠
flex-shrink: 1——它是默认值，但挡不住min-width: auto的优先级
box-sizing: border-box没生效？看Computed面板才作数
写了box-sizing: border-box不等于真起作用。表单元素（input、textarea）、第三方UI库（如Ant Design）或重置样式可能覆盖它。唯一可信的是开发者工具「Computed」标签页里查目标元素的box-sizing值。
常见失效点：
- 伪元素没覆盖：
*::before, *::after必须单独声明box-sizing: border-box，否则它们带padding也会撑破 - 全局重置漏了：
* { box-sizing: border-box; }不够，得写成*, *::before, *::after - 框架样式权重更高，比如Bootstrap的
.form-control可能带!important覆盖你的设置
父容器有padding时，width: 100%根本不是“顶到边”
父元素设了padding: 0 20px，它的content区就只剩100% - 40px；子元素width: 100%只填满这个content区，结果左右各空20px——看似没溢出，实则没对齐视觉边界。
想让子元素视觉上“顶满”父容器总宽（含padding），有两个选择：
- 用绝对定位：
position: absolute; left: 0; right: 0;（此时width: 100%按父的padding box计算） - 别在父上设padding，改用子元素内部嵌套一层容器来留白，更可控
- 避免混用
width: 100%和margin——margin永远算在盒模型外面，box-sizing管不了它
图片/iframe在flex里width: 100%无效？max-width才是关键
替换元素（img、iframe）对width: 100%响应差，尤其在flex中。浏览器会优先按固有尺寸布局，再考虑百分比，导致时机错位。
真正能落地的组合只有三行：
img {
max-width: 100%;
height: auto;
flex: 1 1 0;
}
-
max-width: 100%是上限，比width: 100%更安全 -
flex: 1 1 0等价于flex-basis: 0，强制放弃原始宽度，从零开始分配空间 - 缺
min-width: 0在某些旧Safari下仍可能失效，建议一并加上
最常被忽略的是嵌套层级：外层flex子项加了min-width: 0，但里面又套了个flex容器，而那个容器没加——溢出照旧。每级需要收缩的flex子项，都得单独检查并补上min-width: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
