在 Flex 布局中，width: auto 无法使子项占满父容器宽度，而 width: 100% 存在盒模型与继承限制问题；可靠方案是使用 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），它能跨浏览器一致地让子项弹性占据全部可用主轴空间。
在 flex 布局中，`width: auto` 无法使子项占满父容器宽度，而 `width: 100%` 存在盒模型与继承限制问题；可靠方案是使用 `flex: 1`（等价于 `flex-grow: 1; flex-shrink: 1; flex-basis: 0`），它能跨浏览器一致地让子项弹性占据全部可用主轴空间。
在 Flex 容器中，子元素（flex item）的尺寸不由 width 主导，而是由 flex-basis、flex-grow 和 flex-shrink 共同决定。这是理解本问题的关键：width 在 flex 上下文中仅作为 flex-basis 的初始参考值（当未显式设置 flex-basis 时），而非最终渲染宽度。因此，直接写 width: 100% 或依赖 width: auto 都不可靠——前者受父级 padding/border 影响且不响应 flex 分配逻辑，后者在单子项 flex 容器中默认收缩为内容宽（如你看到的窄条“flex”效果）。
✅ 推荐标准解法：flex: 1
这是 W3C 规范定义的、全浏览器兼容（Chrome 21+、Firefox 20+、Safari 6.1+、Edge 12+）的现代方案：
.parent {
display: flex;
width: 100%; /* 确保父容器自身有明确宽度约束 */
/* 可选：若需防止子项因内容过长而溢出 */
min-width: 0;
}
.child {
flex: 1; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
/* 关键：flex-basis: 0 消除内容宽度干扰，让 grow 从零开始拉伸 */
}该方案优势显著：
- ✅ 真正“填满可用空间”：无论父容器是 width: 300px、max-width: 80vw 还是 100%，子项均严格占据其全部剩余主轴宽度；
- ✅ 响应式天然支持：窗口缩放、父宽动态变化时自动重分配；
- ✅ 无浏览器前缀依赖：无需 -moz-available、-webkit-fill-available 等实验性属性（这些属非标准、已废弃或行为不一致的私有扩展）；
- ✅ 语义清晰、可组合性强：可与其他 flex 子项共存（如侧边栏固定宽 + 主内容 flex: 1），并支持 flex: 2/flex: 0 0 200px 等精细控制。
⚠️ 重要注意事项：
- 若子元素内含长文本、图片或 inline 内容，务必添加 min-width: 0（尤其在 Firefox 和移动端 WebKit 中），否则 flex-shrink: 1 默认行为可能被 min-width: auto（即内容最小宽度）阻断，导致不收缩、横向溢出；
- 避免混用 width 和 flex：例如 width: 200px; flex: 1 会引发冲突，优先以 flex-basis 替代 width（如 flex: 1 1 200px）；
- 对于单子项全宽填充场景，flex: 1 是最简最优解；若需多子项等分，同样适用（flex: 1 在多个子项间均分剩余空间）；
- -moz-available 等私有值不应在生产环境使用：它未进入 CSS Sizing Level 3 正式规范，Chrome/Safari 行为不一致（fill-available 已被移除），且在嵌套 flex 或复杂布局中表现不稳定。
? 进阶技巧：精准控制收缩与基线
当需要“强制保持最小宽度 + 允许弹性增长”时，推荐组合写法：
.child {
flex: 1 0 15%; /* flex-grow: 1; flex-shrink: 0; flex-basis: 15% */
/* 此时宽度 ≥15%，且不会被压缩（shrink: 0），但可随空间增大 */
}这比 min-width: 15% 更符合 flex 设计哲学——它直接干预弹性算法，而非仅设下限。
总结：告别浏览器私有属性和 width: 100% 的陷阱，拥抱标准化的 flex: 1。它不仅是 Firefox 120+ 的可靠选择，更是所有现代浏览器中实现“子项宽度 = 父项可用宽度”的唯一健壮、可维护、语义正确的方案。
