加min-width:0是为覆盖flex子项默认min-width:auto，解除其“宁可撑破也不压缩”的收缩限制；必须配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis及明确宽度约束（如max-width）才生效。
为什么加 min-width: 0 才能解锁收缩能力
Flex 子项默认 min-width: auto，浏览器会把长 URL、连续英文或内联块当不可分割单元，宁可撑破父容器也不压缩。加 min-width: 0 不是让内容变小，而是显式告诉 Flex 布局：“这个元素允许缩到 0 宽度，别管内容多宽”。DevTools 里检查 computed 样式，如果还是 auto，基本就锁定根源了。
min-width: 0 必须搭配哪几个样式才真正生效
它只是“开门钥匙”，没配齐其他三件套，照样溢出：
-
white-space: nowrap：必须写在目标元素上，否则文字提前换行，连“单行溢出”前提都不满足 -
overflow: hidden：裁剪动作本身，但没min-width: 0时，对 flex 子项常形同虚设 -
text-overflow: ellipsis：只对块级元素生效，span类行内元素要加display: block或inline-block - 父容器要有明确宽度约束，比如
width: 100%或max-width: 375px；否则 Flex 容器按内容自适应，根本不存在“溢出”
为什么推荐用 flex: 1 1 0 而不是 flex: 1
flex: 1 等价于 flex: 1 1 auto，意味着“先按内容宽度定初始尺寸，再缩放”，容易被一个长单词卡住；flex: 1 1 0 表示“初始宽度为 0px，全部靠弹性系数分配”，起点明确，收缩更可控。Safari 旧版本对 flex-basis: 0 解析有偏差，必要时可补 flex-basis: 0% 兜底。
容易被忽略的嵌套和兼容性陷阱
复杂卡片或表单项中，溢出常发生在多层嵌套 flex 的“缝隙”里：
- 若子项内部还有 flex 容器（如头像 + 文字块 + 按钮），仅在外层加
min-width: 0不够——内层需收缩的子项也得单独加 -
<img>或<iframe></iframe>有固有尺寸，需额外加max-width: 100%和height: auto - 忘了给父容器设
width或max-width，或把overflow: hidden错加在 wrapper 层级上——它必须作用于实际发生溢出的容器 - 移动端调试时，检查是否误设了
min-width: -webkit-fit-content或min-width: fit-content，它们会覆盖min-width: 0
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
