flex子项不收缩是因默认min-width:auto限制，需显式设min-width:0解除；配合flex:1 1 0、white-space:nowrap、overflow:hidden、text-overflow:ellipsis才能实现省略号效果。
flex子项为什么死活不收缩到内容宽度以下
浏览器给每个 flex 子项默认设了 min-width: auto，它不是 0，也不是你写的 width 值，而是由内部最长不可折行内容决定的“最小内容尺寸”——比如一个没空格的 URL、base64 字符串，或一张固定宽高的 <img>。这个尺寸是 flex-shrink 的硬性下限：哪怕容器只剩 1px 宽，子项也宁可溢出，绝不缩得比它更小。
这不是 bug，是 CSS Flexbox 规范明确要求的行为。但开发者常误以为写了 flex: 1 就等于“能无限压缩”，结果发现文字跑出盒子、滚动条突然出现、text-overflow: ellipsis 完全不触发。
min-width: 0 不是“让元素变小”，而是取消收缩锁
min-width: 0 不会把元素压成一条线，它只是显式覆盖掉那个隐式的最小内容宽度限制，把收缩下限重置为 0。这样 flex-shrink 才真正开始工作，剩余空间才能被重新分配，文本容器才可能获得一个可预测的可用宽度。
- 必须加在 flex 直接子项上，加在父容器或嵌套子元素里都无效
- 对
<img>、<input>等替换元素，min-width: 0本身不够，还需额外加max-width: 100%或flex-shrink: 0 - 在 devtools 里检查 computed 样式，确认
min-width真实值是否已变成0px，而不是被其他规则（如min-width: fit-content）覆盖
只写 min-width: 0 还是看不到省略号
min-width: 0 只是打开收缩开关，要让 text-overflow: ellipsis 生效，还得配齐另外三样：
-
white-space: nowrap：禁止换行，强制单行渲染 -
overflow: hidden：裁剪超出部分（注意：它只在容器真有宽度限制时才起作用） -
text-overflow: ellipsis：显示省略号（仅对块级或 inline-block 元素有效）
漏掉任意一环，效果就消失。尤其要注意：overflow: hidden 单独存在时根本不会触发裁剪，因为容器本身已被撑大，文字根本没“溢出”——你看到的是被顶开的盒子，不是被截断的文本。
flex: 1 和 flex: 1 1 0 的区别真会影响省略号
flex: 1 是简写，等价于 flex: 1 1 0%。问题出在 0%：它让浏览器从“0% 容器宽度”出发计算 flex-basis，但此时内容尚未渲染，导致基础宽度不稳定，text-overflow 失效概率陡增。
而 flex: 1 1 0 中的 0 是像素值，明确告诉浏览器“初始宽度就是 0px”，后续所有伸缩都基于这个确定起点，配合 min-width: 0 后，文字容器宽度才稳定可预期。
常见错误写法：flex: 1; min-width: 0; → 仍可能失效
推荐写法：flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
真正难的不是记住 min-width: 0 这个写法，而是每次遇到溢出都得回头检查：父容器有没有宽度约束、子项是不是 flex 直接子、min-width 是否被其他规则覆盖、文本截断三件套有没有写全——漏掉任意一环，就白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
