为何CSS Grid容器中gap会在行尾添加额外像素？

我知道这听起来像是使用百分比值的典型问题，但实际情况有所不同，至少乍看之下是这样。

场景如下：我们有一个包含若干元素的网格：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

该网格设置了max-width且支持横向滚动：

.container {
  display: grid;
  grid-template-columns: repeat(10, max-content);  
  max-width: 400px;
  overflow-x: auto;
}

同时我们定义了项目的样式以占据空间：

.item {
  background-color: navy;
  width: 100px;
  aspect-ratio: 1 / 1;
}

原本一切正常：向右滚动时，网格内只有被元素占据的区域。但当我为网格添加gap: 5px;后，滚动到最右侧时，滚动区域最右端出现未被元素占据的“额外像素”，这似乎是由gap导致的。

我还发现，只有当项目数量少于声明的列数时才会出现此问题（例如，将grid-template-columns改为repeat(4, max-content);，max-width改为300px;时，一切正常）。

内容的提问来源于stack exchange，提问作者M I P A