I have a flex container with flex-wrap: wrap and align-items: stretch so that children gets stretched when the container is resized up until the next child fits.
The problem is usually the last line has less elements than previous lines and children get stretched too much (all the boxes should look the same in every situation). How can I prevent that other than creating a bunch of empty boxes at the end of the container?
body { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch;}.child { height: 50px; margin: 10px; -webkit-flex: 1 1 50px; flex: 1 1 50px; background-color: red; border: 1px solid black;}<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>JSFiddle is here:http://jsfiddle.net/m_gol/B3wLG/2/