为什么使用Flexbox时，overflow-x会使块的宽度发生变化？

Question

请考虑以下代码段：

.page-wrapper {
  border: 2px solid blue;
  padding: 5px;
  width: 700px;
  /* I'm using flexbox here */
  display: flex;
  justify-content: center;
}
.container {
  border: 5px solid red;
  padding: 10px;
  /* 
    Changing overflow-x, the box width will change:
    hidden --> width is 700px 
    visible --> width is 3000px 
  */
  overflow-x: hidden;
}
.content {
  background-color: orange;
  width: 3000px;
  height: 100px;
}

<div class="page-wrapper">
  <div class="container">
    <div class="content">
    </div>
  </div>
</div>

使用overflow-x: hidden：

使用overflow-x: visible：

为什么要更改容器元素上的overflow-x属性，容器框的宽度会发生变化？

Answer 1

通过definition overflow-x属性visible是内容没有被裁剪，可以在左右边缘之外进行渲染。这是默认值。我认为您应该尝试使用滚动

.page-wrapper {
  border: 2px solid blue;
  padding: 5px;
  width: 700px;
  /* I'm using flexbox here */
  display: flex;
  justify-content: center;
}
.container {
  display: block;
  border: 5px solid red;
  padding: 10px;
  /* 
    Changing overflow-x, the box width will change:
    hidden --> width is 700px 
    visible --> width is 3000px 
  */
  overflow-x: scroll;
}
.content {
  background-color: orange;
  width: 3000px;
  height: 100px;
}

<div class="page-wrapper">
  <div class="container">
    <div class="content">
    </div>
  </div>
</div>