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;
}