Distribute flex items evenly when they wrap

There is actually a trick to do this: Add a pseudo element to the container, and give it a flex-grow of 50 or so. This will create a pretend element that will fill the rest of the space. Note that I removed the border rule, as it counts towards the width of the element and conflicts with flex-basis.

Here is the modified example: https://codepen.io/walidvb/pen/ZXvLYE