flex-wrap not working as expected in Safari

Question

On the homepage of http://www.shopifyexperte.de/ there are two flex-box modules, one under "Kundenstimmen" and one under "Neueste Beiträge...". The inner boxes are supposed to wrap when they go below 220px and not grow above 30% width. This works in latest Chrome, FF and Opera (all on Mac), but in Safari 8.0.5 (Mac) and any iOS browser the boxes never form a row even if there's enough room. They always wrap, each one on a row of its own.

The CSS for the container:

.homepage-testimonial-container {  	display: flex;  	display: -webkit-flex;  	-webkit-flex: 1;  	flex: 1;  	-webkit-flex-direction: row;  	flex-direction: row;  	-webkit-flex-wrap: wrap;  	flex-wrap: wrap;  	-webkit-justify-content: space-between;  	justify-content: space-between;  	-webkit-align-items: flex-start;  	align-items: flex-start;  	margin-top: 1em;  }

The CSS for the boxes inside the container:

.homepage-testimonial {  	margin-bottom: 1em;  	min-width: 220px;  	max-width: 30%;  	-webkit-flex: 1 1 auto;  	flex: 1 1 auto;  }

If I disable -webkit-flex-wrap (effectively setting it to nowrap), all boxes line up in a row but eventually overflow the container when the browser window gets too narrow.

Is this some kind of bug in Safari/Webkit or am I doing something wrong here?

Answer 1

It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.

This question has some info: https://stackoverflow.com/a/30792851/756329

Answer 2

Set child elements like this seems to work for me

flex: 1 0 auto;