Firefox中Flex子项不收缩是因默认min-width: auto，必须在直接承载文本的元素上加min-width: 0才能生效；text-overflow: ellipsis需同时满足块级、明确宽度、nowrap、hidden四条件，缺一不可。
Firefox 里 Flex 子项不收缩、文字撑爆容器、text-overflow: ellipsis 失效——不是 BUG，是它严格执行了规范里的「隐式最小尺寸」（min-width: auto），而你没显式覆盖它。
为什么 min-width: 0 是必须加的，而不是可选？
Flex 子项默认 min-width: auto，实际表现≈内容最窄能缩到哪。一段无空格 URL、一个 <img> 或内联元素，都会卡住这个下限。哪怕写了 flex: 1 或 flex-shrink: 1，它也拒绝压缩。
-
min-width: 0是唯一合法方式，覆盖规范定义的 implied minimum size -
overflow: hidden单独加没用——它只裁剪视觉，不释放弹性空间 - Chrome/Safari 实际按
min-width: 0处理，所以“看起来正常”，但那是宽松实现，不是标准
text-overflow: ellipsis 不生效？检查这四个条件是否全满足
缺一不可，且顺序和层级不能错：
- 元素必须是块级：
display: block或inline-block（<span>得先加） - 必须有明确宽度约束：
width或max-width（不能是auto） white-space: nowrapoverflow: hidden
但关键陷阱在第二条：如果子项没加 min-width: 0，即使父容器设了 width: 100%，子项仍会按内容宽度锁定，导致宽度计算结果仍是 auto——整个链条就断了。
立即学习“前端免费学习笔记（深入）”；
加在哪一层？错一层就白忙活
必须加在直接承载文本或内联内容的元素上，不是 Flex 容器，也不是外层包裹 <div>。
比如结构是：
.container { display: flex; }
.item { flex: 1; }
.item > span { /* 这里才是文字所在 */ }那 min-width: 0 必须落在 span 上。否则 span 仍死守自身内容宽度，.item 再怎么 flex 也压不动。
- 子项是
<img>？除了min-width: 0，还得加max-width: 100%防原始尺寸撑开 - 子项内部用了
display: inline-flex？它的子项也有min-width: auto，得在外层也加min-width: 0 - 用了
flex: 0 1 auto缩写？它隐含min-width: auto，必须额外覆盖
Firefox 的 align-items: baseline 常被忽略
当 Flex 容器里混有文字、<button>、图标等 inline 元素时，Firefox 会严格走基线对齐（align-items: baseline），而 Chrome/Safari 常退回到 stretch。结果就是按钮底边比文字低一截，或换行后高度塌陷。
- 局部修正：对单个子项用
align-self: flex-start，比全局设更安全 - 避免在子项内部同时用
vertical-align、line-height和display: flex——三者叠加在 Firefox 里触发不可预测的基线计算 - 打开 Firefox 开发者工具 → Layout 面板 → 勾选
Show flexbox overlays，确认主轴/交叉轴高亮是否符合预期
真正麻烦的从来不是写不写 min-width: 0，而是它该加在哪一层、配合什么显示模式、以及有没有被嵌套的 inline 上下文悄悄绕过。漏掉其中任意一环，FireFox 就会立刻退回规范本位，给你看“标准但难搞”的真实模样。
