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"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 或 <span class="title"></span>）：
-
min-width: 0：唯一能覆盖min-width: auto的标准写法（不能用0px或0%） -
white-space: nowrap：必须写在这里，父级设置无效；否则文字提前折行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若前两项没配齐，它只是个摆设 -
display: block或display: inline-block：因为text-overflow: ellipsis仅对块级盒生效；<span></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，问题就还在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
