Flexbugs: Safari 9: Specifying % for flex-basis when flex-direction=column causes parent to lose height

Created on 4 Mar 2016 · 11Comments · Source: philipwalton/flexbugs

Bumped into this issue tonight, took a very long time to debug, will circle back with replication bin tomorrow once I sleep.

Source

runspired

👍9

Most helpful comment

I believe this is just yet another example of Flexbug 1. Since you're setting the flex direction to column, the flex-basis value goes in the vertical direction, but the height of the container is determined by its children, so you have a circular reference and a percentage value is meaningless.

However, the items should, by default, not shrink below their minimum content size (Flexbug 1), but in Safari they're not honoring that. When you say 100%, since the height isn't fixed, that computes to 0, which is why you're seeing them all squished.

philipwalton on 28 May 2016

👍12

All 11 comments

Seams the same for chrome

benzen on 17 Mar 2016

Can you please provide an example, and preferably a workaround as well?

philipwalton on 22 Mar 2016

@philipwalton sure, only didn't cause I noticed the other related issue.

runspired on 22 Mar 2016

Hi,
Had this bug too. Here is an example: https://jsfiddle.net/b85Lh1q2/1/
Workaround flex-basis: auto: https://jsfiddle.net/b85Lh1q2/5/
Only for 100% cases.

MagmaRules on 11 Apr 2016

👍7 😄1

I had this bug pop up in Safari only. flex-basis: auto on my flex items solved it but I do not know why.

mvattuone on 9 May 2016

👍1

philipwalton on 28 May 2016

👍12

removing min-height fixed this bug for me in safari.

jeffreygnatek on 1 Dec 2016

👍1

Thanks, supremely helpful !

mvattuone on 1 Dec 2016

Thank you @philipwalton ! You've really helped me!

selrond on 6 Mar 2017

Hi, i faced the same bug and the only solution that worked for me was to set an explicit height for my container that have flex-direction:column and target specifically the ipad using media queries:

By the way, i don't want to go political, but the fact that you need a mac in order to have dev tools for ipad really sucks. I had to debug stupidly while i could inspect elements even in a windows tablet like surface....

https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/