具有溢出的可滚动内容的Flexbox会切断子元素

Question

我发现flexbox容器没有使用overflow: auto和justify-content: center正确滚动所有子元素。元素越少，一切运行良好（元素集中在容器中）。但是，当内容溢出时，左侧的元素会在滚动div中被切除。

我发现设置justify-content: space-between并没有减少任何内容，但这不是预期的行为。我也知道这可以做到没有flexbox，但有谁知道为什么这不起作用？

JSFiddle示例：

很少有元素，工作正常：https://jsfiddle.net/z50g5ysu/2/

溢出的元素，左边的元素被切断：https://jsfiddle.net/z50g5ysu/3/

HTML：

<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS：

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 150px;
  width: 400px;
  border: 2px solid red;
  overflow-x: auto;
}

.box {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  margin: 10px;
  flex: none;
}