scroll和flex居中布局冲突

overflow: scroll和flex居中布局冲突，左侧顶出

前两天写样式的时候发现了一个有趣的问题，这里使用demo复现一下

首先在父元素中创建一个容器，容器中子元素使用flex布局使其水平居中定位，此时我们继续添加子元素，使其超出父元素的最大宽度，而父元素中有overflow: scroll的样式。

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

.container {
    
    
  display: flex;
  width: 500px;
  height: 300px;
  align-items: center;
  background: pink;
  overflow: scroll;
  justify-content: center;
}
.bigBox {
    
    
  border: 2px solid red;
  height: 200px;
  display: flex;
}
.item {
    
    
  width: 300px;
  height: 180px;
  border: 10px solid green;
  background-color: orange;
}

在我的理解中，应该会左侧顶头剩下的可向右滚动，可是却出现了所有元素仍在父元素中居中，左侧隐藏类似overflow: hidden，右侧可滚动类似overflow: scroll。如下图:

一个子元素的情况下：

多个子元素宽度超出的情况下：

至今没有找出原因，于是准备曲线救国。查阅资料后发现可以使用margin来进行剧中定位来解决这种问题。更改样式代码如下：

.container {
    
    
  margin: auto;
  display: flex;
  width: 500px;
  height: 300px;
  align-items: center;
  background: pink;
  overflow: scroll;
}
.bigBox {
    
    
  border: 2px solid red;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.item {
    
    
  width: 300px;
  height: 180px;
  border: 10px solid green;
  background-color: orange;
}

效果如下：

一个子元素时：

多个子元素时（超出父元素最大宽度）：

虽然是实现了想要的展示方式，但不知道为何flex会和scroll冲突，如果有大佬知道为何会出现这种情况，求解答。

谢谢观看~