如何让背景延伸超出固定宽度带overflow属性的父容器范围

问题原因 #

你设置固定宽度的父容器开启滚动后，内部每行的flex容器默认会继承父容器的宽度（也就是40rem）。你每行内部的子元素总宽度已经远大于40rem，超出的部分属于flex容器的溢出内容，但flex容器本身的宽度仍然只有40rem，所以背景色只能覆盖到40rem的范围，向右滚动后溢出区域自然没有背景填充。

解决方案 #

只需给每行的flex容器添加width: fit-content属性，让行的宽度由内部实际内容的总宽度撑开，背景色就会覆盖整行所有区域，包括溢出滚动的部分。
如果需要兼容旧版本浏览器，也可以把行的display: flex替换为display: inline-flex，二者效果一致，inline-flex元素的宽度默认由内容撑开。

修改后的核心代码 #

你只需要调整行元素的样式即可，修改后的行代码如下：

{rows.map((row: any, index) => (
  <div style={{ 
    background: index % 2 === 0 ? 'orange' : 'white', 
    display: 'flex', 
    width: 'fit-content' /* 新增这一行即可生效 */
  }}>
    {row.map((label: string) => (
      <div style={{ margin: '0 5rem', width: '15rem' }}>{label}</div>
    ))}
  </div>
))}

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