flex子项默认min-width: auto导致无法收缩，加min-width: 0可显式覆盖该默认值，使flex-shrink生效；需配合overflow: hidden、white-space: nowrap、text-overflow: ellipsis及父容器宽度约束才能实现省略号效果。
不是你写错了，而是浏览器给每个 flex 子项默认加了 min-width: auto——它不响应你写的 min-width: 160px，也不等于 0，而是“至少容下内容固有宽度”的隐式锁。只要父容器空间一紧，flex-shrink: 1 就会先压缩子项，min-width 彻底被跳过。
为什么 computed 中 min-width 还是 auto？
这是最直接的判断依据：打开 DevTools → Elements → Styles → 查看该元素的 min-width 计算值。如果显示 auto（而不是你写的像素值或 0），就坐实了问题根源。
-
min-width: auto是浏览器对flex子项的默认行为，无法通过继承或父级样式覆盖 - 哪怕你写了
min-width: 120px，只要没显式覆盖掉这个auto，它就一直生效 -
flex: 1、flex: 1 1 auto、甚至flex: 0 1 200px都不会自动重置min-width
为什么加 min-width: 0 就行？
min-width: 0 不是“设最小宽度为 0”，而是唯一能显式覆盖 min-width: auto 的合法值。它把尺寸控制权交还给你，让 flex-shrink 真正参与计算。
- 比
min-width: 1px更干净：避免在缩放或高 DPI 下出现渲染抖动 - 必须写在
flex的**直接子元素**上，写在父容器或嵌套后代里无效 - 对
<img>还要额外加max-width: 100%，否则图片可能撑破容器 - 若子项内部还有
flex容器（比如头像+文字块），内层也要加min-width: 0
只加 min-width: 0 还不够，得配齐三件套
min-width: 0 只是打开收缩开关，真正让 text-overflow: ellipsis 生效，还得闭环三个条件：
- 父容器要有明确宽度约束（如
width: 100%、max-width: 375px），否则子项再怎么缩也没参照 - 子项必须同时有：
overflow: hidden、white-space: nowrap、text-overflow: ellipsis——漏一个，省略号就不出来 - 若用了
flex: 1，建议显式写成flex: 1 1 0（注意是数字0，不是0%），避免flex-basis推导异常
flex-shrink: 0 和 min-width: 0 到底选哪个？
逻辑完全不同：前者是“锁死不许缩”，后者是“允许缩但守底线”。
- 要绝对锁死尺寸（比如导航按钮、开关图标）→ 用
flex-shrink: 0或flex: 0 0 140px - 想让它弹性伸缩但底线是 120px → 保留
flex-shrink: 1，加min-width: 120px，并确保父容器允许换行或留足空间 - 滥用
flex-shrink: 0会导致小屏溢出，尤其在响应式断点切换时，得配套加overflow: hidden或媒体查询兜底
最容易被忽略的是嵌套层级和父容器宽度约束——min-width: 0 加了，但父容器没设 max-width，或者内层 flex 容器漏了 min-width: 0，效果就全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
