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 suppo

Answer 1

Setting flex-basis: 20em also works, min-width: 20em does not.

Answer 2

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 3

Set child elements like this seems to work for me

flex: 1 0 auto;

Answer 4

I'm using Safari 11.0.1 and the bug persists. I use Bootstrap 3 combined with display: flex on my .row elements. I added following to my css to target the column elements. There seems to be something about the width percentages in Safari that aren't being honored correctly.

.row [class*=col-]{
    margin:0 -.3px;
}

Answer 5

There are other solutions that work for me.

In the .row container before and after are gets added with these properties:

row:before, .row:after {
 content: " ";
 display: table;
}

so setting up the display: none or display: inline will solve the problem or setting up the content: none will also solve it.

.row:before, .row:after {
   display: none;
}
or
.row:before, .row:after {
   display: inline;
}

or
.row:before, .row:after {
   content: none
}

Answer 6

This is indeed a Safari bug. The details are available at the excellent flexbugs page, but to quote it:

Safari uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto.

So the fix / workaround - as suggested by other answers here - is to set the flex-basis to an explicit width rather than auto.