Streaming live at 10am (PST)

Flex box stacking vertically not working in Firefox/Safari


#1

Hey folks,

Loving the new flexbox shiz but I'm having a slight problem which I cant work out though. I'm trying to achieve a slightly different grid set up (see link) and the Left hand column doesn't seem to work when viewed in Firefox/Safari but looks great in Chrome. It's like the vertical stacking isn't working in other browsers.

Anyone got any ideas?

https://preview.webflow.com/preview/studio-epitaph?preview=9d3d98ec5799aa1aeeef509cf5160ee9

Also if you've got any feed back on the site please share!


#2

Hi @Sprackhaus,

Since flexbox isn't suited for having variable sizes of nested items across both horizontal and vertical dimensions (flex container is essentially a single-dimension layout mechanism), doing this kind of layout might be tricky. But, with a little dose of imagination, everything is possible (and you almost did it yourself).

It's quite hard to inspect you design, because of the complex structure, but I've noticed that you use "Wrap Children" setting on vertical flex containers (which you shouldn't, because setting direction to Column already makes the children "stack" on top of each other). Having "Wrap Children" on a Flex Column container can potentially wrap nested items onto next "column" to the right, which looks like the issue you had in Firefox.

I've set up a similar example for you, which is responsive and works in Firefox/Safari/Chrome. There are several ways to do this kind of layout, but this is how I'd do it: https://preview.webflow.com/preview/grid-example-eb7dac?preview=d28d84a6c89245289d390a563e17f3fc

Hope this helps.


#3

Cheers Gadzhi! Absolute legend. Always very impressed with the great and fast feedback from you guys!

Thanks again!


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.