min-width: 0 覆盖 Flex 子项默认的 min-width: auto，重置收缩底线为 0，使 flex-shrink 生效；但需与 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 同时作用于同一块级元素才触发截断。
min-width: 0 覆盖的是 Flex 子项默认的 min-width: auto
浏览器给每个 display: flex 容器的**直接子元素**隐式设了 min-width: auto，它不是“没值”，而是由内容决定的最小物理宽度——比如一个无空格 URL https://example.com/very-long-path 或长英文单词 supercalifragilisticexpialidocious，会被当作不可折行单元，浏览器宁可撑开容器、横向滚动，也拒绝压缩到比它更小。加 min-width: 0 就是显式覆盖这个隐式下限，把收缩底线重置为 0，让 flex-shrink 真正生效。
为什么只加 min-width: 0 文字还是不省略
因为 min-width: 0 只是“解锁收缩权限”，不是“自动截断开关”。它必须和以下三者**同时作用于同一块级元素**才触发完整链路：
-
white-space: nowrap：必须写在这里，写在父级会导致文字提前换行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若min-width: auto还在锁着宽度，文本根本没溢出，这行就形同虚设 -
text-overflow: ellipsis：只对块级元素生效；span这类行内元素得先加display: block
漏掉任意一个，就会出现：文字被压缩但不省略、右侧按钮被顶出屏幕、DevTools 里 min-width 的 computed 值仍是 auto。
flex: 1 和 flex: 1 1 0 对 min-width: 0 的影响差别很大
flex: 1 是简写，等价于 flex: 1 1 0%。问题出在 0%：它让浏览器尝试从“0% 容器宽度”推导基础尺寸，但此时内容尚未渲染，flex-basis 计算异常，导致文本容器宽度不稳定，text-overflow 失效概率陡增。而 flex: 1 1 0 中的 0 是像素值，明确告诉浏览器“初始宽度就是 0px”，后续所有伸缩都基于这个确定起点。配合 min-width: 0 后，文字容器才能稳定获得可预测的可用宽度。
嵌套 Flex 容器里容易漏掉 min-width: 0
真实项目中，失效常藏在多层嵌套里。例如卡片 .card 是 display: flex，里面的信息块 .info 又是 display: flex，再里面才是 .text。这时：
-
min-width: 0必须加在.text上，不能指望外层“传染” - 如果
.info内部也有需要收缩的文本子项（如标题+描述），它们也得单独加min-width: 0 - 移动端尤其要注意：
flex-direction: column下，min-width: 0不影响垂直伸缩，但文本截断仍发生在水平方向，所以目标子项自己得有max-width: 100%，否则照样撑开
真正难的不是记住 min-width: 0 这个写法，而是每次遇到溢出都得回头检查：父容器有没有宽度约束、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、文本截断三件套有没有写全——漏掉任意一环，效果就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
