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

Question

It seems that Chrome doesn't handle justify-content: space-around correctly when the content overflows the flex container, and the container is not set up to allow wrapping, but instead horizontal scrolling.

Some of the content overflows on the left side of the flex container, and is cut off. I want it to overflow on the right side, so that I can reach it by scrolling horizontally.

Here is an example:

#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

That's because when there isn't enough space, space-around behaves like 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.

And center behaves like you describe:

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

Instead, you can use 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.

Of course, then you won't have half-size spaces on neither end of the flex line. You can insert pseudo-element to have full-size spaces, though.

#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

Since the container is limited in width and you want overflowing flex items to be accessed via horizontal scrolling, why use justify-content: space-around?

Try justify-content: flex-start:

Revised Codepen

To understand why overflowing flex items may be inaccessible via scroll, see this answer.

If you're interested in a Javascript workaround for the original code, see this post:

• When centering horizontally, li's get cut off