答案是flex子项默认min-width: auto构成隐式收缩锁，需显式设min-width: 0解除，并配合white-space: nowrap、overflow: hidden和text-overflow: ellipsis才能触发截断；嵌套flex容器须逐层加min-width: 0。
flex子项默认min-width: auto是隐式收缩锁
不是“不能缩小”，而是浏览器给每个flex子项悄悄加了min-width: auto——它会根据内容固有尺寸（比如一串长URL、连续英文、图片原始宽）推算出一个最小宽度底线。哪怕你写了flex: 1或flex-shrink: 1，只要内容宽度 > 可用空间，浏览器就卡在那个底线不动，根本不会触发收缩计算。
为什么flex-shrink设了也纹丝不动
因为flex-shrink只在「容器总需求宽度 > 可用空间」时才参与布局。常见失效场景包括：
-
flex-basis太小或为auto：内容本身只有60px宽，父容器300px，压根没“多余空间要挤” - 子项含
<input>、<img alt="为什么CSS flex元素默认不能缩小内容" >或长单词：它们自带UA默认min-width: auto（Chrome里<input>约13ch），flex-shrink管不了这层 - 父容器未溢出：DevTools里看computed width和子项总
flex-basis和，若后者 ≤ 前者，flex-shrink直接被跳过
text-overflow: ellipsis不生效的真正原因
不是CSS写错了，是min-width: auto让子项“拒绝变窄”，导致连溢出都触发不了——white-space: nowrap和overflow: hidden全成了摆设。必须三件套齐上：
- 对直系flex子项加
min-width: 0 - 配
white-space: nowrap - 再加
overflow: hidden和text-overflow: ellipsis
漏掉min-width: 0，其他全是空转。
立即学习“前端免费学习笔记（深入）”；
嵌套flex容器里的子项也要单独加min-width: 0
如果flex子项内部又是个display: flex容器，它的子元素同样受min-width: auto约束。这种“穿透式锁定”会让外层min-width: 0完全失效。必须逐层显式覆盖：
- 外层flex项目：
min-width: 0 - 内层flex容器：
min-width: 0 - 内层中要截断的文本容器：
min-width: 0+white-space: nowrap
多一层嵌套，就多一道默认锁；不手动解开，它永远按内容固有尺寸撑开。
