为什么CSS Flex布局里的flex:1没有撑满剩余空间？

flex: 1 失效的根本原因是父容器未设置 display: flex，导致子元素不构成 flex item，flex 属性被浏览器完全忽略；必须显式为直接父容器设 display: flex 或 inline-flex，并逐级检查 computed 样式确认生效。

父容器没开 Flex 上下文，flex: 1 直接被忽略

浏览器只对 display: flex 或 display: inline-flex 的直接子元素解析 flex 属性。如果父容器漏了 display: flex，或者中间夹了一层普通 div（比如加了 class 但没设 flex），那子元素就不是 flex item，flex: 1 完全不生效。

实操建议：

1. 用开发者工具选中目标元素，看“Flex”标签页是否亮起；不亮 = 父级没启用 Flex
2. 检查 computed 样式里 display 是否为 flex，别被其他样式（如 display: block）覆盖
3. 嵌套结构中，每一层要参与伸缩的容器都得自己写 display: flex，不能靠继承

flex-basis: auto 让内容宽度抢走“剩余空间”

flex: 1 等价于 flex: 1 1 auto，第三个值 flex-basis: auto 意味着：浏览器先按子元素自身内容宽度（或已设的 width、min-width）占位，再把剩下的空间分配给 flex-grow。文字多、图片大、 这类元素天然有 min-width: auto，起点宽，分到的“剩余”就少甚至为零。

实操建议：

1. 真正均分必须显式写 flex: 1 1 0（注意是 0，不是 0%），让所有子项从零宽度起步再分配
2. 含长文本、图片、 的子项，额外加 min-width: 0 覆盖默认最小宽度
3. 避免在子项上写 width、min-width、max-width —— 它们会直接覆盖 flex-basis

主轴方向或尺寸约束缺失，根本没“剩余空间”可分

flex: 1 不是“强制填满”，而是“分剩余”。水平方向常能蒙对，因为 viewport 有默认宽度；垂直方向更容易翻车——父容器若 height: auto，computed height 就是 0px 或内容高度，flex-grow 无空间可分。

实操建议：

1. 根容器优先用 min-height: 100dvh（比 100vh 更稳，避开 iOS 软键盘缩 viewport）
2. flex-direction: column 时，中间层容器若也参与纵向伸缩，它自己必须是 display: flex
3. 别依赖 height: 100% 向上追溯：必须同步给 html 和 body 加 height: 100%，否则百分比失效
4. 用开发者工具检查父容器的 computed height 或 width：如果是 auto 或 0px，问题就卡在这儿

Firefox 中 min-width: auto 锁死伸缩，必须显式重置

Firefox 严格遵循规范，默认给每个 flex 子项设 min-width: auto（水平主轴）或 min-height: auto（垂直主轴）。哪怕写了 flex: 1，只要子项里有文字、图片或内联元素，它就拒绝缩得比内容更小，导致“看起来没拉伸”。

实操建议：

1. 水平布局必须加 min-width: 0，垂直布局加 min-height: 0 —— 这是唯一能覆盖隐式最小尺寸的合法方式
2. 别只写 flex: 1，改用完整写法：flex: 1 1 0
3. 子项是 或 时，额外加 flex-shrink: 0，否则 Firefox 可能把它们压扁
4. text-overflow: ellipsis 在 Firefox 里失效？四条件缺一不可：display: block、明确 width 或 max-width、white-space: nowrap、overflow: hidden；而第二条若因没加 min-width: 0 导致宽度算成 auto，整个链条就断了

最稳的组合是 flex: 1 1 0 + min-width: 0 + gap，但 DOM 每一层的 display 值、每一处隐式尺寸限制（比如 的默认 min-width）、甚至中间某个容器是否塌缩，都可能成为漏网之鱼。