使用calc设置flex-basis时Flexbox背景被父容器宽度截断问题

针对滚动时Flexbox背景无法超出父容器边界的问题，提供以下几种解决思路：

方法一：将Flex容器改为内联块级元素 #

把Flex容器的display: flex改为display: inline-flex，让浏览器正确识别其完整宽度，背景会自动覆盖整个Flex容器：

<div style="width: 300px; overflow-x: auto;">
  <div style="display: inline-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>

方法二：用伪元素实现全屏背景 #

给Flex容器添加相对定位，通过绝对定位的伪元素来铺背景，确保背景覆盖整个Flex容器的实际宽度：

<div style="width: 300px; overflow-x: auto;">
  <div style="display: flex; height: 30px; width: max-content; position: relative;">
    <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 style="content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0f0; z-index: -1;"></div>
  </div>
</div>

方法三：明确百分比宽度的参考值 #

你当前Flex子项的30%是基于父容器（300px）计算的，可通过CSS变量明确参考值，避免计算歧义，同时确保背景跟随Flex容器宽度延伸：

<div style="width: 300px; overflow-x: auto; --parent-width: 300px;">
  <div style="display: flex; height: 30px; background: #0f0; width: max-content">
    <div style="flex: 0 0 calc((var(--parent-width) * 30%) + 150px);">1</div>
    <div style="flex: 0 0 calc((var(--parent-width) * 30%) + 150px);">2</div>
    <div style="flex: 0 0 calc((var(--parent-width) * 30%) + 150px);">3</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user13844939