与overflow-x:scroll和justify-content:center一起使用时出现问题

Question

我在 Flex 父容器上使用 Overflow-x:scroll 和 justify-content:center 时遇到问题。请参阅下面我的代码。

问题：第一个 Flex 子项目未显示它在左侧或其他所有子项目中裁剪。请参阅下面的屏幕截图和代码。

我需要你的帮助。先感谢您。

.container {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  overflow-x: scroll;
}

.box {
  height: 100px;
  border: 1px solid red;
  min-width: 100px;
  margin-right: 10px;
  flex-grow: 1;
}

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

Answer 1

使justify-content: center内容居中对齐，左侧的一些内容被切除。您可以将其删除并尝试。

.container {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  overflow-x:scroll
}
.container::before,
.container::after {
  content: '';
  width: 100%;
}
 
.box {
  height: 100px;
  border: 1px solid red;
  min-width: 100px;
  margin-right: 10px;
  flex-grow: 1;
}

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