Firefox中flex子项易溢出是因为其严格执行min-width:auto规范，必须在直接文本元素上同时设置min-width:0、white-space:nowrap、overflow:hidden和display:block/inline-block四件套，并用flex:1 1 0明确flex-basis为0，否则ellipsis等截断效果全部失效。
Firefox 对 min-width: auto 的执行比 Chrome 更严格，不加 min-width: 0 时，flex 子项几乎必然撑破容器——这不是兼容性 bug，而是它更忠实地遵循了规范。
为什么 Firefox 中 flex 子项更容易溢出
Firefox 默认将 flex 子项的 min-width 解析为内容驱动的最小宽度（比如一长串 URL 或连续英文），且极少“妥协”。Chrome 有时会悄悄压缩一点，Safari 则在某些组合下表现不稳定。但 Firefox 会坚定地守住 min-width: auto 这条线，导致 overflow: hidden、text-overflow: ellipsis 全部失效。
- 常见现象：
text-overflow: ellipsis完全不显示；white-space: nowrap下文字跑出卡片右边界；DevTools 中 computedmin-width明确显示auto - 关键区别：Firefox 不会因父容器窄而自动触发换行或截断，必须显式解除收缩锁死
- 别指望全局重置生效：第三方库（如 Bootstrap）可能覆盖你写的
min-width: 0，务必在目标元素上单独声明
必须写在同一元素上的四件套
min-width: 0 只是起点，缺任意一项，Firefox 就不会裁剪文本。这四个声明必须共存于**直接承载文本的 flex 子项**（例如 <p class="truncate"> 或 <span class="title">）：
-
min-width: 0：唯一能覆盖min-width: auto的标准写法（不能用0px或0%） -
white-space: nowrap：必须写在这里，父级设置无效；否则文字提前折行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若前两项没配齐，它只是个摆设 -
display: block或display: inline-block：因为text-overflow: ellipsis仅对块级盒生效；<span>默认是inline，不加就白配
flex-basis 必须用像素值：flex: 1 1 0
在 Firefox 中，flex: 1 展开为 flex: 1 1 0%，而 0% 会让浏览器尝试从百分比推导基础宽度，此时内容尚未布局完成，计算极易异常，导致文本容器可用宽度不可控，ellipsis 失效。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
flex: 1 1 0（第三个参数是数字0，不是0%），等价于flex-basis: 0px - 效果：强制从零开始均分剩余空间，配合
min-width: 0后，Firefox 才能稳定分配可预测的宽度 - 避免混用：
width: 100%和flex: 1冲突，尤其在嵌套 flex 中，只保留flex: 1 1 0
含长 URL 或无空格字符串时的兜底方案
即使四件套齐全，纯连续字符串（如 https://example.com/very-long-path 或 xxxxxxxxxxxxx）仍可能撑开容器——因为 white-space: nowrap 禁止折行，min-width: 0 也救不了“无溢出边界”的情况。
- 允许折行：加
word-break: break-word（语义合理，兼容 Firefox 15+） - 坚持单行：确保该元素有明确宽度约束（如
max-width: 300px），再配齐四件套 - 禁用
word-break: break-all：它会在任意位置切断单词，Firefox 下也不触发ellipsis，且破坏可读性 - 嵌套 flex 场景：内层 flex 容器（如头像+文字块）中，文字所在元素（如
.text）也要单独加min-width: 0，不能靠外层继承
Firefox 不会帮你“猜意图”，它只严格执行你写的每一条规则。最容易被忽略的是：四件套必须同元素、同作用域；min-width: 0 必须写在真正装文本的那个标签上，而不是它的父容器或 wrapper div —— 否则 DevTools 里看到的 computed min-width 还是 auto，问题就还在那里。
