Firefox中overflow: hidden不生效，主因是flex子项默认min-width: auto阻止收缩，需显式设min-width: 0；同时text-overflow: ellipsis需white-space: nowrap、overflow: hidden、text-overflow: ellipsis三者共存。
Firefox里overflow: hidden不生效？先查min-width
Flex子项在Firefox中写overflow: hidden却依然撑开容器，大概率不是overflow没起作用，而是min-width: auto在背后锁死了收缩能力。Chrome有时会“帮忙压缩”，但Firefox严格按规范执行——子项默认有min-width: auto，哪怕你写了white-space: nowrap和text-overflow: ellipsis，它也不肯缩到内容宽度以下。
必须显式覆盖这个默认值：
-
min-width: 0（最通用，推荐） - 或
min-width: min-content（语义更准，但IE/旧Android WebView不支持） - 只对
display: flex的直接子项有效；嵌套flex需逐层加
overflow: hidden + text-overflow: ellipsis失效的三件套缺一不可
单行文本省略号不是靠overflow: hidden单独实现的，它依赖三个声明同时作用于同一元素：
-
white-space: nowrap：禁止换行，让文字变成一行横向延伸 -
overflow: hidden：裁掉超出容器的部分 -
text-overflow: ellipsis：在截断处显示省略号
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 把
white-space: nowrap写在父容器上，子项仍会换行 - 用
word-break: break-all代替white-space: nowrap——它会暴力断词，且不触发ellipsis - 在flex子项上漏了
min-width: 0，导致前两项形同虚设
Firefox滚动条不预留空间，overflow: hidden可能被遮盖
Firefox默认不为滚动条预留空间，当内容刚好溢出、浏览器临时显示滚动条时，它会直接叠在内容上——此时你写的overflow: hidden看似生效，实则被滚动条物理遮挡，视觉上像“没截住”。
解决方向不是硬抗，而是绕开：
- 给容器加
padding-right: 17px（或更大），留出滚动条位置 - 用
scrollbar-width: thin强制Firefox用窄滚动条，减少侵占 - 若必须隐藏滚动条，用
::-webkit-scrollbar { display: none }+scrollbar-width: none，但注意这会让Firefox失去滚动能力，得靠touch-action: pan-x保移动端拖拽
flex: 1和flex-shrink: 1不是一回事，别混淆
flex: 1展开是flex: 1 1 0%，其中第二个1是flex-shrink: 1，但它只控制“是否参与压缩”，不决定“从哪开始压缩”。如果子项本身有固定宽、图片或长URL，flex-shrink: 1可能根本压不动。
更可控的写法：
-
flex: 0 1 auto：不放大、可缩小、基准为内容尺寸 -
flex: 1 1 0：比flex: 1更激进，强制从零宽度开始分配（适合纯文本场景） - 含URL时额外加
word-break: break-word，避免因单词过长卡死收缩
真正麻烦的永远不是加哪几行CSS，而是flex容器的高度来源是否稳定——比如height: 100%的祖先没设高度，整个链路就失效，overflow: hidden再全也没用。
