flex-wrap not working as expected in Safari
CssFlexboxCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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
Solution 2 - Css
Set child elements like this seems to work for me
flex: 1 0 auto;
Solution 3 - Css
I had a similar issue in Safari (9.1.3) with the Bootstrap 3 grid system (e.g. col-md-4) in combination with flex. I solved it by setting margin: 0 -1px;
on the col items and flex-wrap: wrap;
on the wrapper.
Solution 4 - Css
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;
}
Solution 5 - Css
Setting flex-basis: 20em
also works, min-width: 20em
does not.
Solution 6 - Css
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
.
Solution 7 - Css
I just ran into this issue again and used 'flex-flow'. Worked like a charm.
.row {
@include flex();
@include flex-wrap();
flex-flow: row;
}
Solution 8 - Css
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
}
Solution 9 - Css
Remove display: -webkit-box if you have.