firefox中flex:1常失效是因为其默认min-width:auto阻止收缩，需显式设min-width:0或用flex:1 1 0；水平布局加min-width:0，垂直布局加min-height:0，并避免基线对齐干扰。
Firefox 对 flex 属性的解析更严格，不加 min-width: 0 或用错 flex 缩写，flex: 1 就会失效——这不是“偶尔不生效”，而是只要子项含文字或内联内容，就大概率塌缩、截断或错位。
为什么 flex: 1 在 Firefox 中常被忽略？
Firefox 默认给 flex 子项设了 min-width: auto（水平布局下），而 Chrome/Safari 实际采用 min-width: 0 行为。当父容器宽度受限、子项里有文字或 img 时，min-width: auto 会阻止收缩，导致 flex-grow: 1 失去作用空间。
- 典型现象：侧边栏不占满剩余宽度、卡片内容被压缩、文本溢出容器但不换行
- 不是 bug，是规范允许的差异行为；Firefox 更贴近原始 Flexbox 草案语义
-
getComputedStyle(el).minWidth返回auto即可确认该问题存在
必须显式设置 min-width: 0 或 min-height: 0
仅靠 flex: 1 不够，需配合尺寸约束才能激活弹性分配逻辑。
- 水平布局（
flex-direction: row）：子项加min-width: 0 - 垂直布局（
flex-direction: column）：子项加min-height: 0 - 若子项是
img、iframe或含display: inline内容，额外加flex-shrink: 0防止被错误压缩 - 避免只写
overflow: hidden代替min-width: 0——它可能掩盖问题但不解决根本
别用 flex: 1 简写，改用完整三值语法
flex: 1 是 flex: 1 1 0% 的简写，但 Firefox 对 flex-basis 的解析对百分比敏感；0% 在某些嵌套场景下会被当作无效值处理。
- 推荐写法：
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 如果需要子项不收缩，用
flex: 1 0 0，而非flex: 1 0（后者在旧版 Firefox 中可能退化为flex: 1） - 对图片类子项，建议直接写
flex: 0 0 auto+ 显式width/height，避开flex-basis解析歧义
Firefox 的基线对齐干扰常被误认为 Flex 错位
当 flex 容器内混用文字、按钮、图标等 inline 元素时，Firefox 可能触发隐式 align-items: baseline，造成视觉错位——比如按钮底边和文字底部不对齐，这和 flex 本身无关，但排查时极易混淆。
- 不要依赖默认
align-items值；显式声明align-items: stretch或flex-start - 单个子项可用
align-self: flex-start覆盖，比全局设更安全 - 禁用
vertical-align和line-height与 flex 同时作用——它们会干扰基线计算 - 打开 Firefox 「Layout」面板 → 勾选「Show flexbox overlays」，观察主轴/交叉轴高亮是否贴合预期，比看 computed 样式更可靠
真正麻烦的不是写多少兼容代码，而是 Firefox 的渲染偏差往往不报错、不警告，只悄悄错位。最有效的验证方式不是检查样式是否存在，而是用 getComputedStyle(el).display === 'flex' 确认引擎已启用 flex 上下文，再叠加 overlay 可视化确认布局路径是否真实生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
