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 a

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