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?

score 37 · Accepted Answer · edited May 23 '17 at 12:03

37

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

edited May 23 '17 at 12:03

Community

1
1

answered Jun 11 '15 at 23:03

Joseph Hansen

12,665
8
50
68

1

The bug seems to be [closed just a couple of days ago](https://bugs.webkit.org/show_bug.cgi?id=136041), so we can expect a fix in the next release of Safari. – joepio Dec 02 '16 at 13:50
5

@JoepMeindertsma - it doesn't matter much since you still have to support +2 years old browser versions.. – vsync Dec 24 '16 at 11:01

score 36 · Answer 2 · answered Mar 29 '16 at 17:04

36

Set child elements like this seems to work for me

flex: 1 0 auto;

answered Mar 29 '16 at 17:04

socrateisabot

837
2
10
28

This is probably because recent updates to Safari finally have it working correctly. – Joseph Hansen Jun 08 '16 at 15:02
Yeah, Safari 9 pretty much have flexbox working the same as chrome. But that wasn't the case with 8. – Dave Sep 02 '16 at 04:28
7

@Dave Let's not get out the band just yet. It's 2017 and Safari still has a long way to go to catch up to any of it's competitors. – DreamTeK Sep 13 '17 at 14:45
1

In 2023 this is still broken in Safari. See https://codepen.io/tedmcdo/pen/dygjPX – user3450906 May 14 '23 at 23:38

score 33 · Answer 3 · answered Aug 22 '17 at 18:47

33

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.

answered Aug 22 '17 at 18:47

eye-wonder

1,181
9
17

7

That was it, a single line that fixes everything under iOS. In my own opinion, this solution is the best because it keeps the flex properties and everything else intact without modifying your overall design and all with min-width and stuff. – David May 03 '18 at 16:08
I think it has something to do with Safari rounding pixels without decimals when calculating. – eye-wonder Jul 30 '18 at 07:30
1

This fixed it! Thanks a ton. – Keith Pickering Dec 13 '18 at 22:04
2

Still a problem in 2020 and this hack still fixes it! – James Ellis-Jones May 04 '20 at 11:42
thanks - worked a treat on a wp site misbehaving on mac and iPhone – Kevin Jul 07 '20 at 12:12
This did not fix my problem on Safari v. 10.1.2 (2017), which is the current version as of 9/21/20 for Yosemite 10.10.5 running on a MacBook Pro (as native install from purchase with natural updates). At least it didn't break all the other browsers/OS's. – AppDreamer Sep 21 '20 at 17:07
@AppDreamer I suggest asking a new question regarding your problem - posting a simplified version of your code. It might be a slightly different scenario or CSS combo. I would not want to worry to much about supporting old Safari versions. Apple no longer support Yosemite and would think Safari v. 10.1.2 (or older) in 2020 has way under 1% browser market share world wide. – eye-wonder Sep 23 '20 at 09:32

score 14 · Answer 4 · answered Nov 16 '17 at 19:57

14

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;
}

answered Nov 16 '17 at 19:57

Dexter Adams

514
1
7
16

2

I just encountered this exact issue (Safari 11, Bootstrap 3). When I use `display: flex` and `flex-wrap: wrap` on a row with four columns, Safari only displays three columns per row rather than four. Setting negative left/right margins as shown above fixes it. – daGUY Jan 19 '18 at 18:47

score 10 · Answer 5 · answered Mar 23 '17 at 19:17

10

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

answered Mar 23 '17 at 19:17

sidstumple

101
1
2

Thank you! That's 4 hours of my life I want back! I tried everything else here, but adding flex-basis to my three child objects allowed me to keep wrap-reverse and it works across all browsers now. Thanks! – AppDreamer Sep 21 '20 at 20:33

score 6 · Answer 6 · answered May 18 '17 at 11:39

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.

score 4 · Answer 7 · answered Mar 09 '19 at 19:24

4

I just ran into this issue again and used 'flex-flow'. Worked like a charm.

.row {
    @include flex();
    @include flex-wrap();
    flex-flow: row;
}

answered Mar 09 '19 at 19:24

CS_student

97
4
9

best solution imo :) – user1597594 Sep 09 '19 at 11:46
Well that's only because you're overwriting the flex-wrap. Flex-flow is a shorthand for flex-direction and flex-wrap. – nomadoda Feb 22 '21 at 16:23

Puneet Sehgal · Answer 8 · 2020-05-29T18:11:12.937

1

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
}

edited May 29 '20 at 18:11

answered May 28 '20 at 15:17

Puneet Sehgal

39
2

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](/review/first-posts/26249142) – double-beep May 28 '20 at 15:41

score 0 · Answer 9 · answered Dec 14 '21 at 05:41

0

Remove display: -webkit-box if you have.

answered Dec 14 '21 at 05:41

devbikash07

161
2
4

score 0 · Answer 10 · answered Sep 06 '22 at 05:00

0

I have edit the col-md-6{ flex: 0 0 49.9%} It's working for safari

answered Sep 06 '22 at 05:00

Full Stack Developer

470
1
4
10

flex-wrap not working as expected in Safari

10 Answers10

Linked