根本原因是浏览器默认给flex子项设了min-width: auto，它会阻止显式min-width生效；加min-width: 0可覆盖该隐式值，配合overflow: hidden、text-overflow: ellipsis和white-space: nowrap才能实现正确截断与收缩。
Flex子项min-width写对了却没用，根本原因是min-width:auto在捣鬼
不是你CSS写错了，而是浏览器给每个flex子项默认加了min-width: auto——它不等于0，也不等于内容宽度，而是一个“至少容下内容固有尺寸”的隐式锁。哪怕你写了min-width: 160px，只要内容本身撑不开160px，浏览器就按内容算；一旦父容器空间紧张，flex-shrink: 1（默认值）会先压缩子项，min-width直接被跳过。
典型现象：button设了min-width: 160px，窄屏下还是被压成80px；input写width: 100%完全不生效；文本加了text-overflow: ellipsis但就是不显示省略号。
检查点：computed面板里看min-width值是不是仍为auto，而不是你写的像素值。
加min-width: 0是最快破局方式，但它必须写在flex直接子项上
min-width: 0不是“设个最小值”，而是显式覆盖掉那个隐式的min-width: auto，把尺寸控制权交还给你。它比min-width: 1px更干净，避免缩放抖动。
适用场景包括：
- 图标容器、头像、带
flex: 1的文本区——任何需要“可缩到极小”的flex项目 -
input、select等表单控件，在flex容器中要自适应伸缩 - 横向
flex布局中需截断长文本的标题栏
注意：min-width: 0必须写在flex直接子元素上，不能只写在父容器或嵌套后代里；对<img>还要额外加max-width: 100%防撑破。
只加min-width: 0还不够，得配齐“收缩链”上所有环节
min-width: 0只是打开收缩开关，真正让效果落地，还得看三件事是否闭环：
- 父容器有没有明确宽度约束？
display: flex容器自身无限宽，子项再怎么缩也没用 - 子项是否同时写了
overflow: hidden、text-overflow: ellipsis和white-space: nowrap？漏一个，省略号就出不来 - 子项用了
flex: 1的话，建议显式写成flex: 1 1 0，避免flex-basis意外取到内容宽度
移动端尤其容易漏：Safari iOS对无width的flex子项更保守，min-width: 0加了也塌缩成一竖条，得补flex-basis或max-width。
flex-shrink: 0和min-width: 0选哪个？看你要的是“锁死”还是“守底”
逻辑完全不同：flex-shrink: 0是强硬禁止收缩，min-width是柔韧守底线。
- 要绝对锁死尺寸（比如导航按钮不能变窄）→ 用
flex: 0 0 140px，等价于flex-shrink: 0+flex-basis: 140px - 想让它弹性伸缩，但底线是120px → 保留
flex-shrink: 1，加min-width: 120px，并确保父容器允许换行或留足空间
滥用flex-shrink: 0会导致溢出，尤其在响应式断点切换时，得配套加overflow: hidden或媒体查询兜底；而min-width: 0配合flex-wrap: wrap才是应对窄屏最自然的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
