必须显式给flex直接子元素设min-width: 0，因其默认min-width: auto会按最长不可折行内容（如url）锁定最小宽度，该约束仅作用于第一层子项、不继承不传递；需配合max-width/width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis等才能实现截断或换行。
必须显式给 flex 直接子元素设 min-width: 0，否则浏览器按内容算出的 min-width: auto 会锁死宽度，导致换行、截断、缩放全部失效。
为什么 min-width: 0 必须加在直接子元素上
Flex 布局对 display: flex 容器的**第一层子元素**隐式应用 min-width: auto，这个值不会出现在 Styles 面板里，但在 Computed 面板中能看到它被解析为几百像素（比如一长串 URL 或 base64）。
这个约束不继承、不传递、不兜底：
- ✅ 正确：
.card { display: flex; }→.title { min-width: 0; } - ❌ 无效：
.card { min-width: 0; }（父容器设了没用） - ❌ 无效：
.title > span { min-width: 0; }（span 不是 flex 直接子项，除非它显式设了display: block） - ⚠️ 嵌套时要重复加：如果
.desc内部又用了display: flex，那它的子项也得单独写min-width: 0
min-width: 0 单独写没用，必须配齐三件套
min-width: 0 只是“解锁收缩权限”，不是换行或省略号开关。漏掉任意一项，内容照样撑开：
- 必须有明确宽度参照：
max-width: 100%、width: 200px，或用flex: 1 1 0（第三个参数是像素值，起点为 0）；flex: 1等价于flex: 1 1 auto，仍会被内容撑开 - 换行场景需配：
overflow-wrap: break-word+word-break: break-all（兜底防无断点字符串）；注意word-break: break-word已废弃，别用 - 截断场景需配：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis；且三者必须写在同一元素上，span类行内元素还得先加display: block
移动端和嵌套 flex 下的典型翻车点
这些地方最容易漏掉关键约束，导致 min-width: 0 形同虚设：
- 父容器没设
width或max-width：Flex 容器自身无限宽，子项再怎么缩也没参照，“溢出”根本无从谈起 -
img或其他替换元素：除了min-width: 0，必须加max-width: 100%和height: auto，否则原始尺寸照常撑破 -
padding没配box-sizing: border-box：默认content-box下，padding会叠加在flex-basis之外，总宽直接超限 - Safari ≤15.6 识别问题：不要写
min-width: 0px或min-width: 0%，只用无单位的min-width: 0 - 写了
flex-shrink: 0：它和min-width: 0冲突，等于锁死宽度，务必删掉
真正卡住的往往不是 min-width: 0 本身，而是它和 max-width、box-sizing、flex-basis 这几处的配合关系——调试时一定打开 DevTools 的 Computed 面板，确认 min-width 真实值是 0px，而不是被其他规则覆盖或降级为 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
