为什么空格会使弹性项目在左侧溢出？

这是因为当没有足够的空间时，space-around其行为类似于center：

如果剩余的自由空间为负或在线上只有一个弹性项目，则此值等于center。

并center表现得像您描述的那样：

如果剩余的自由空间为负，则弹性项目将在两个方向上均等地溢出。

相反，您可以使用space-between：

如果剩余的自由空间为负或在线上只有一个弹性项目，则此值等于flex-start。

当然，那么在弯曲线的两端都不会有一半的空格。不过，您可以插入伪元素以具有完整大小的空格。

#container {
  display: flex;
  justify-content: space-between; /* Instead of space-around */
}
#container::before, #container::after {
  content: ''; /* Insert space before the first item and after the last one */
}

.container {
  display: flex;
  width: 500px;
  border: solid black;
  justify-content: space-between;
  overflow: auto;
  margin: 10px 0;
}
.container::before, .container::after {
  content: '';
}
.item {
  margin: 10px;
  background-color: red;
  display: table;
  font-size: 48pt;
  text-align: center;
}
.big > .item {
  min-width: 200px;
}

  
1
2
  
3
4
  
5
6


  
1
2
  
3
4
  
5
6