当 Flex 容器的子项通过 flex-basis 结合 calc() 计算出超出父容器宽度的总尺寸时，若容器设置了 width: max-content 或父容器启用 overflow-x: auto，Flex 容器的背景色常无法完整渲染——根源在于宽度限制与溢出处理层级错位。
当 flex 容器的子项通过 `flex-basis` 结合 `calc()` 计算出超出父容器宽度的总尺寸时，若容器设置了 `width: max-content` 或父容器启用 `overflow-x: auto`，flex 容器的背景色常无法完整渲染——根源在于宽度限制与溢出处理层级错位。
Flex 布局中，背景色（background-color）的渲染范围严格受限于元素自身的盒模型尺寸（content box），而非其内部内容的实际布局宽度。在原始代码中：
<div style="width: 300px; overflow-x: auto;">
<div style="display: flex; height: 30px; background: #0f0; width: max-content">
<div style="flex: 0 0 calc(30% + 150px);">1</div>
<div style="flex: 0 0 calc(30% + 150px);">2</div>
<div style="flex: 0 0 calc(30% + 150px);">3</div>
</div>
</div>问题有两处关键冲突：
-
width: max-content强制 Flex 容器仅包裹“首行内联尺寸”，但calc(30% + 150px)中的百分比基于父容器（300px）计算，三项总和约为3 × (90px + 150px) = 720px，远超 300px； - 父容器虽设
overflow-x: auto，但 Flex 容器自身被max-content锁死宽度（通常接近 300px），导致背景仅铺满该受限宽度，而滚动内容实际延伸至 720px —— 背景因此“被截断”。
✅ 正确解法是让 Flex 容器自身成为滚动主体，并解除其宽度约束：
<div style="width: 300px;">
<div style="display: flex; height: 30px; background: #0f0; overflow-x: auto;">
<div style="flex: 0 0 calc(30% + 150px);">1</div>
<div style="flex: 0 0 calc(30% + 150px);">2</div>
<div style="flex: 0 0 calc(30% + 150px);">3</div>
</div>
</div>此时：
- Flex 容器无
width限制，会自然依据子项flex-basis总和撑开（约 720px）； -
overflow-x: auto应用于 Flex 容器本身，使其具备水平滚动能力； - 背景色
#0f0将完整覆盖整个 720px × 30px 的内容区域，滚动时背景持续可见。
⚠️ 注意事项：
- 避免在 Flex 容器上同时设置
width（如max-content、100%）与依赖内容撑开的flex-basis，二者逻辑冲突； - 若需保持父容器的固定宽度控制（如响应式布局），可改用
min-width: 300px或flex-shrink: 0配合width: fit-content，但须测试浏览器兼容性； -
calc()中的百分比始终相对于包含块（containing block）宽度，此处即外层div（300px），确保计算预期一致。
总结：Flex 背景渲染依赖容器的计算后尺寸，而非内容溢出范围。要实现“背景随滚动内容延展”，必须将 overflow 移至 Flex 容器，并移除对其宽度的显式限制，使其能真实反映子项布局宽度。
