Streaming live at 10am (PST)

Flexbox columns stacking wrong on IE11


#1

Hi, So I’m aware that IE11 has partial support for flexbox, but I wonder if any of you good people could shed some advise.
I have a site ready to go https://preview.webflow.com/preview/fcftest?preview=9e61ff45a43ddea1b50bacf9084b4e59
and I’ve noticed that on IE11 on Windows 10 the 4 flexbox columns on the home page are not stacking correctly.
They are each set as flex children at 24% basis each. This works perfect on all browsers bar IE11.
I’ve noticed if I reduce column basis down to 15% it works perfect for IE11 but off course this will have a knock-on effect on all other “proper” browsers!!
Any ideas hows to get around this? Is there a webkit of some sort I can use?

if you view http://fcftest.webflow.io/ on IE11 you should see what I mean.


#2

self fixed!!! by making basis: auto and instead making the actual width 24%.
(note 24% is to get around Safari issues with Flexbox)