Question

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

某些内容在Flex容器的左侧溢出，并被切断。我希望它在右侧溢出，这样我就可以通过水平滚动来达到它。

以下是一个例子：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

那是因为当空间不足时，space-around的行为与center相似：

如果剩余的自由空间为负数，或者该行只有一个flex item，则此值与center相同。

而center的行为就像你描述的那样：

如果剩余的自由空间为负数，flex items将会溢出同样在两个方向。

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

如果剩余的自由空间为负数，或者该行只有一个flex item，则此值与flex-start相同。

当然，你不会在柔性线的两端都有半尺寸的空间。但是，您可以插入伪元素以获得全尺寸空格。

#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>

Answer 2

由于容器的宽度有限，并且您希望通过水平滚动访问溢出的flex项，为什么要使用justify-content: space-around？

尝试justify-content: flex-start：

Revised Codepen

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

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

When centering horizontally, li's get cut off

为什么空间允许弹性物品在左侧溢出？

2 个答案: