如何让可滚动元素的background-color覆盖完整宽度而非仅可见区域？

当flex容器开启水平滚动时，内部行元素默认只会适配初始可见区域的宽度，滚动后超出部分没有背景色——核心原因是行元素未撑满容器的完整滚动宽度，以下是两种直接的修复方案：

方案1：强制行元素撑满滚动宽度 #

给每个行元素添加min-width: 100%样式，让行的最小宽度匹配容器的滚动总宽度，背景色就能覆盖整个行的全部区域：

.row {
  min-width: 100%;
  /* 保留你原有的交替背景色样式 */
  &:nth-child(odd) { background: #fff; }
  &:nth-child(even) { background: #ff0; }
}

方案2：改用Grid布局（更省心的替代方案） #

如果场景允许，将容器改为Grid布局，行元素会自动跟随容器的滚动宽度，无需额外设置宽度：

.container {
  display: grid;
  grid-template-rows: repeat(3, auto);
  overflow-x: auto;
}
.row {
  /* 保留交替背景色样式 */
  &:nth-child(odd) { background: #fff; }
  &:nth-child(even) { background: #ff0; }
}

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