firefox中flex子项不收缩需先加min-width: 0（水平布局）或min-height: 0（垂直布局），因其严格执行min-width: auto默认值；必须作用于直系flex项目，并配合flex: 1 1 0、white-space: nowrap、overflow: hidden等才能生效。
Firefox里flex子项不收缩？先加min-width: 0
Firefox对min-width: auto执行得比Chrome/Safari更严格，只要子项含文字、<img>或内联内容，它就会卡住收缩下限——哪怕你写了flex: 1或flex-shrink: 1，空间也分不出去。
解决方法不是调flex-shrink，而是直接覆盖这个隐式最小宽：
- 水平布局（
flex-direction: row）：给需拉伸的子项加min-width: 0 - 垂直布局（
flex-direction: column）：用min-height: 0 - 必须加在**直系 flex 项目**上，不能只加在父容器或嵌套容器里
-
overflow: hidden单独加没用，它只裁视觉，不释放弹性空间
flex: 1在Firefox里失效？别省略flex-basis
flex: 1是简写，等价于flex: 1 1 0%。Firefox会把0%解析为“基于内容宽度的0%”，而内容宽度可能不可靠（比如一串无空格URL），导致计算失败。
换成显式基准更稳：
- 用
flex: 1 1 0代替flex: 1，明确flex-basis为0 - 若子项是
<img>或<iframe></iframe>，额外加flex-shrink: 0防止被错误压缩 - 按钮类元素在iOS Safari中
min-width: 0会被忽略，得改用min-width: 1px+flex: 1 0 0
文字截断（text-overflow: ellipsis不生效？四条件缺一不可
在Firefox里，text-overflow: ellipsis要起效，必须同时满足且顺序正确：
- 元素是块级：
display: block或inline-block - 有明确宽度约束：
width或max-width（不能是auto） white-space: nowrapoverflow: hidden
但关键陷阱在第二条：如果该元素本身是flex子项，且没加min-width: 0，即使父容器设了width: 100%，它仍按内容宽度锁定，宽度计算结果仍是auto——整个链条就断了。
滚动区域不出现滚动条？高度链和min-height: 0都要查
给Flex子项加overflow-y: auto却没滚动条，大概率是因为容器没真正“溢出”。Firefox里尤其容易漏掉两个点：
- 外层容器必须有明确高度约束（如
height: 100vh或max-height: 400px），不能只靠flex: 1撑开 - 滚动区域本身要是独立一层，不能直接加在
flex: 1元素上；包裹层必须加min-height: 0，否则Firefox仍按min-height: auto算最小高 - 检查
align-items: stretch是否在作祟——它会让子项强行填满高度，掩盖溢出
最易被忽略的是：哪怕所有样式都写了，Firefox的「Computed」面板显示正常，也不代表它真参与了布局计算。得打开Layout面板勾选「Show flexbox overlays」，或用getComputedStyle(el).display确认返回的是"flex"而非"-ms-flexbox"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
