CSS网格超出视口宽度时背景不随滚动显示的问题

搭建了一个宽度超出视口（viewport）的CSS Grid，期望向右滚动查看完整网格内容，但网格的背景色仅覆盖视口大小范围，向右滚动后右侧区域无背景显示。

相关代码 #

CSS #

.table {
  background-color: blue;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(6, 50%);
}

.element {
  background-color: lightblue;
  word-break: break-all;
  white-space: nowrap;
}

HTML #

<div class="table">
  <div class="element">this is an element of the grid</div>
  <div class="element">this is an element of the grid</div>
  <div class="element">this is an element of the grid</div>
  <div class="element">this is an element of the grid</div>
  <div class="element">this is an element of the grid</div>
  <div class="element">this is an element of the grid</div>
</div>

问题根源在于CSS Grid容器的默认宽度行为：.table作为块级元素，默认宽度是父元素的100%（即当前视口宽度），即便内部网格内容超出视口，容器本身不会自动扩展宽度，导致背景色只覆盖视口范围。

直接给Grid容器添加width: fit-content;，让容器宽度自适应内部网格的总宽度，背景色就能覆盖整个网格区域：

.table {
  background-color: blue;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(6, 50%);
  width: fit-content; /* 新增属性 */
}

如果需要容器在屏幕宽度足够时占满视口，仅在内容超出时自适应宽度，可改用min-width: fit-content;：

.table {
  background-color: blue;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(6, 50%);
  min-width: fit-content; /* 改用min-width */
  width: 100%;
}

另外，确保网格所在的父容器（若存在）设置overflow-x: auto;，保证超出视口的部分能正常横向滚动。

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