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 完全不生效。
实操建议：
- 用开发者工具选中目标元素，看“Flex”标签页是否亮起；不亮 = 父级没启用 Flex
- 检查 computed 样式里
display是否为flex，别被其他样式（如display: block）覆盖 - 嵌套结构中，每一层要参与伸缩的容器都得自己写
display: flex，不能靠继承
flex-basis: auto 让内容宽度抢走“剩余空间”
flex: 1 等价于 flex: 1 1 auto，第三个值 flex-basis: auto 意味着：浏览器先按子元素自身内容宽度（或已设的 width、min-width）占位，再把剩下的空间分配给 flex-grow。文字多、图片大、<input> 这类元素天然有 min-width: auto，起点宽，分到的“剩余”就少甚至为零。
实操建议：
- 真正均分必须显式写
flex: 1 1 0（注意是0，不是0%），让所有子项从零宽度起步再分配 - 含长文本、图片、
<input>的子项，额外加min-width: 0覆盖默认最小宽度 - 避免在子项上写
width、min-width、max-width—— 它们会直接覆盖flex-basis
主轴方向或尺寸约束缺失，根本没“剩余空间”可分
flex: 1 不是“强制填满”，而是“分剩余”。水平方向常能蒙对，因为 viewport 有默认宽度；垂直方向更容易翻车——父容器若 height: auto，computed height 就是 0px 或内容高度，flex-grow 无空间可分。
实操建议：
- 根容器优先用
min-height: 100dvh（比100vh更稳，避开 iOS 软键盘缩 viewport） -
flex-direction: column时，中间层容器若也参与纵向伸缩，它自己必须是display: flex - 别依赖
height: 100%向上追溯：必须同步给html和body加height: 100%，否则百分比失效 - 用开发者工具检查父容器的 computed
height或width：如果是auto或0px，问题就卡在这儿
Firefox 中 min-width: auto 锁死伸缩，必须显式重置
Firefox 严格遵循规范，默认给每个 flex 子项设 min-width: auto（水平主轴）或 min-height: auto（垂直主轴）。哪怕写了 flex: 1，只要子项里有文字、图片或内联元素，它就拒绝缩得比内容更小，导致“看起来没拉伸”。
实操建议：
- 水平布局必须加
min-width: 0，垂直布局加min-height: 0—— 这是唯一能覆盖隐式最小尺寸的合法方式 - 别只写
flex: 1，改用完整写法：flex: 1 1 0 - 子项是
<img>或<iframe></iframe>时，额外加flex-shrink: 0，否则 Firefox 可能把它们压扁 -
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 值、每一处隐式尺寸限制（比如 <input> 的默认 min-width）、甚至中间某个容器是否塌缩，都可能成为漏网之鱼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
