Flexbox items don't wrap in latest Safari and Chrome (using max-width on flex-container and flex-basis on flex-items)

Question

There's a plethora of questions relating to issues of the implementation of flexbox in Safari, but I couldn't find a solution that addresses my issue. Following code is working great in Firefox: both images are displayed in a row if there's enough space, otherwise the second image wraps below the first one. In Safari and Chrome, the second image wraps into a new line, no matter how much space available. Also, theres a huge vertical gap between the stacked images:

 div { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; max-width: 42em; padding-bottom: 1em; } img { max-width: 25em; margin-bottom: 1em; -webkit-flex-basis: 14em; flex-basis: 14em; -webkit-flex-grow: 1; flex-grow: 1; }

 <div style=""> <img src="http://www.fillmurray.com/480/320"> <img src="http://www.fillmurray.com/480/320"> </div>

Fiddle: https://jsfiddle.net/madamadam/ywkrxLv0/25/

Any help much appreciated!

Answer 1

It seems that the issue is related to the initial image width that is considered to perform the calculation of the free space. Adding width:0 seems to fix the issue

 div { display: flex; flex-wrap: wrap; max-width: 42em; padding-bottom: 1em; } img { max-width: 25em; width:0; margin-bottom: 1em; flex-basis: 14em; flex-grow: 1; }

 <div style=""> <img src="http://www.fillmurray.com/480/320"> <img src="http://www.fillmurray.com/480/320"> </div>