When centering horizontally, li's get cut off

See more:

CSS

I am trying to layout li's using flexbox. I have them set to column, with 3 li's in each column. The problem is when I want the ul centered.

I'm centering the ul using align-content: center. When I do that, and have more li's than the page can show (overflowed), the li's at the beginning get cut off. (The ones on the left side get cut off, but the ones on the right side display fine.)

I will not have a specific number of li's, it could range from 4 to 50. So I therefore cannot remove align-content: center, because when I have a small amount of li's, (let's say 4), the results are not what I want.

How can I center the ul without having it get cut off?


JSFiddle