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

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