Fluid Flexbox height Safari

[culbrique]

Hi

I would like to make my layout working on Safari but it doesn’t. It’s a very simple items display with relative weight/height made with flexbox

https://jsfiddle.net/jrtnr5b3/1/

Do you think it’s possible to make it work on Safari ?

[Atelierbram]

I tried flex-basis: 33.333%; on the list-item, which makes it also work on Safari I think.

http://codepen.io/atelierbram/pen/ggJXeG

[culbrique]

Thank you but it doesn’t work. Did you tested it on Safari ? It’s like anything happened. Flex-Basis, as far as I understood, is useful for setting width only. So it’s not a solution

[Atelierbram]

Tested this in desktop Safari, but now that I saw it in iOS Safari I see what you mean. Had another crack at this with some added wrapper elements, which does work as far as I can see. Keep in mind I tested this Codepen demo in “debug” view (on an iPad) though; with the other views like full-page the Codepen-Chrome iframe intervenes.

[culbrique]

Hi
Tanks to spend your time on my question. But your crack has the same effect as a table.

My goal is to set an automatic layout depending on the items numbers, with a minimum of three (33.333%). With your code, just try to delette one li and you’ll see an empty block. What I’m looking for is to extend this block to the maximum width.

The working result is here (with chrome and firefox): https://jsfiddle.net/jrtnr5b3/
The buttons are here to simulate the number of blocks, and you’ll see that blocks can extend if one inside a line is not present.

How can I have this result working on Safari ?

[Atelierbram]

Thanks for the extra explanation, so I misunderstood your intention. Can you confirm it’s about mobile Safari iOS, like on an iPad?

The latest attempt is edited again and tested in desktop browsers (Safari as well), and on iOS Safari (iPad2) as well, and it does work. Keep in mind in this Codepen the Autoprefixer plugin creates the extra vendor prefixes for -webkit and others, so you have to “inspect element” to see those, if you care for that.

The difference in code is not that much. Where I set an explicit height of 50vh on the list-item (ISO min-height: 50vh) and use flex-grow: 1 for the expansion to 100% where the list-item wraps on it’s on row.

[culbrique]

Well thank you, it’s much better, but not entirely resolved ! :) It works on Safari iOs and iPad.

I added : min-height:100vh to container and min-height: 50vh; to items.

You are using flex-basis to set the width of items. But we are losing the possibility to extend the box like the 1st Jsfiddle with 100% width when we click on them. I think because the flex-basis option crash the thing.

https://jsfiddle.net/jrtnr5b3/2/

Don’t yout think it’s really a Safari bug on relative height/width like specified in CanIUse “Know Issues” http://caniuse.com/#feat=flexbox

[culbrique]

No you were right !
It’s my fault, I putted a width:100% on click instead of flex-basis:100%.
https://jsfiddle.net/jrtnr5b3/3/

Thank you very much for your help and time !

But if you could explain to me the CanIUse specification about Safari, it would be welcome. Because apparently, width/height with relative values looks to works on Safari now.

[Atelierbram]

Glad to be of help. When you look under the “Known issues” tab on the CanIUse page for viewport units you will see a few bugs for iOS7 Safari, so there is likely “more than meets the eye” here. Though vague, that’s all I can say about that, so maybe we should ask someone like @paulie_d who is likely more into specs and generally more knowledgeable about things like these.

[Author]

Posts