Почему пространство вокруг позволяет гибким элементам переполняться с левой стороны?

Кажется, что Chrome не обрабатывает justify-content: space-around правильно, когда содержимое переполняет контейнер flex, а контейнер не настроен для переноса, но вместо этого горизонтальная прокрутка.

Некоторые из содержимого переполняются с левой стороны контейнера 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>

Ответы

Ответ 1

Так как контейнер ограничен по ширине, и вы хотите, чтобы переполняющие элементы гибкости были доступны через горизонтальную прокрутку, зачем использовать justify-content: space-around?

Попробуйте justify-content: flex-start:

Пересмотренный Codepen

Чтобы понять, почему переполненные элементы гибкости могут быть недоступны через прокрутку, см. этот ответ.

Если вы заинтересованы в обходном пути Javascript для исходного кода, см. это сообщение:

Ответ 2

Это потому, что, когда места недостаточно, 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>