css - 为什么使用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容器元素的属性，容器框的宽度会发生变化？

标签： cssflexboxoverflow

Answer 1

根据定义 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>