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

Question

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

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

Вот пример:

#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

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

Пытаться justify-content: flex-start:

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

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

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

• При центрировании по горизонтали li обрезают

Answer 2

Это потому, что когда не хватает места, space-around ведет себя как center:

Если оставшееся свободное пространство отрицательно или в строке есть только один элемент flex, это значение идентично center,

А также center ведет себя так, как вы описываете:

Если оставшееся свободное пространство отрицательно, гибкие элементы будут переполнены одинаково в обоих направлениях.

Вместо этого вы можете использовать space-between:

Если оставшееся свободное пространство отрицательно или в строке есть только один элемент flex, это значение идентично 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>