为什么 space-around 允许弹性项目在左侧溢出？

Question

当内容溢出 flex 容器时，似乎 Chrome 没有正确处理 justify-content: space-around，并且容器未设置为允许换行，而是水平滚动。

flex 容器左侧部分内容溢出，被截断。我想让它溢出到右边，这样我就可以通过水平滚动到达它。

这是一个例子：

#container {
  display: flex;
  width: 500px;
  justify-content: space-around;
  border: solid black;
  overflow: auto;
}
.item {
  min-width: 200px;
  margin: 10px;
  background-color: red;
  display: table;
  font-size: 48pt;
  text-align: center;
}

<div id="container">
  <div class="item">1</div><div class="item">2</div>
  <div class="item">3</div><div class="item">4</div>
  <div class="item">5</div><div class="item">6</div>
</div>

Answer 1

既然容器的宽度是有限的，而且你希望通过水平滚动访问溢出的 flex 项目，为什么要使用 justify-content: space-around？

尝试 justify-content: flex-start:

Revised Codepen

要了解为什么无法通过滚动访问溢出的弹性项目，请参阅。

如果您对原始代码的 Javascript 解决方法感兴趣，请参阅此 post:

Answer 2

那是因为当 space 不足时，space-around 的行为类似于 center:

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center.

并且 center 的行为就像您描述的那样：

If the leftover free-space is negative, the flex items will overflow equally in both directions.

相反，您可以使用 space-between:

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start.

当然，那么你不会在 flex 线的两端都有半尺寸的 spaces。不过，您可以插入伪元素以获得全尺寸 spaces。

#container {
  display: flex;
  justify-content: space-between; /* Instead of space-around */
}
#container::before, #container::after {
  content: ''; /* Insert space before the first item and after the last one */
}

.container {
  display: flex;
  width: 500px;
  border: solid black;
  justify-content: space-between;
  overflow: auto;
  margin: 10px 0;
}
.container::before, .container::after {
  content: '';
}
.item {
  margin: 10px;
  background-color: red;
  display: table;
  font-size: 48pt;
  text-align: center;
}
.big > .item {
  min-width: 200px;
}

<div class="container big">
  <div class="item">1</div><div class="item">2</div>
  <div class="item">3</div><div class="item">4</div>
  <div class="item">5</div><div class="item">6</div>
</div>
<div class="container">
  <div class="item">1</div><div class="item">2</div>
  <div class="item">3</div><div class="item">4</div>
  <div class="item">5</div><div class="item">6</div>
</div>

为什么 space-around 允许弹性项目在左侧溢出？

Why does space-around allow flex items to overflow on the left side?

css

flexbox