Flexbugs: Safari container can collapse when using flex-direction: column and an order

Created on 21 Mar 2016 · 6Comments · Source: philipwalton/flexbugs

Safari seems to have an issue when it comes to wrapping elements when the container has flex-direction: column and a max-height, but only when one (or more) of the children have an order defined. Safari seems to collapse the container until the element that has the order, but other children are no longer taken into account as if Safari has taken them out of flow.

I've put together a fiddle showing the bug but here are some images to help explain that top sentance:

Expected result:
container-expected

Safari:
container-safari

I couldn't find an actual solution to this bug without setting an explicit height and it only seems to be a bug when flex-direction is set to column - row works fine (but looks different).

I don't have an Apple ID so I'm not able to log this as a Safari bug, although if someone else could report it I'd be very grateful. I saw this issue with Safari 9.1.

Source

james-jlo-long

Most helpful comment

In a one rather particular case, the combination of max-height and padding-bottom:100% and flex: 1 0 auto; in another case helped me to visually rectify the situation, but not to fix the bug.

zhrivodkin on 27 Mar 2017

👍2

All 6 comments

Brief update: I logged a bug with Apple, but I can't work out how to get a link to the report.

james-jlo-long on 21 Mar 2016

Interesting, yeah this just seems like a bug, and not something that can easily be worked around. I'm going to close this issue for now, but feel free to reopen if you get more info or discover a workaround.

Also, if you get your link to the tracking bug please list it here as well.

philipwalton on 22 Mar 2016

Did some experimenting on this, and it looks like the order property doesn't have anything to do with it. Changing the source order has the same effect.

Changing the wrapper to useposition:absolute; (and bottom: 100px) makes it at least honor the height, but it doesn't scale the wrapper down like it should. Getting closer:

But another problem is Safari doesn't apply flex-shrink to the items once they've wrapped to each take up their own line like they should. Maybe I'll report that as a separate issue.

geddski on 8 Feb 2017

In a one rather particular case, the combination of max-height and padding-bottom:100% and flex: 1 0 auto; in another case helped me to visually rectify the situation, but not to fix the bug.

zhrivodkin on 27 Mar 2017

👍2

Why is this closed?