How to force division into equal parts using flexbox

To force the equal distribution, you have to add width: 0 to all flex items. This came to my mind after reading Manuel Matuzovic's article, which has a very good in-depth conclusion how flex-grow works.

https://css-tricks.com/flex-grow-is-weird/

If you want elements to grow or shrink independently to it's content, specify zero flex basis:

flex-basis: 0;

However, my demo incorrectly works in Chrome: large image stretches it's parent container no matter that zero basis has been set. As a workaround, maximum width can be set:

img {
  max-width: 100%;
  height: auto;
}