Hi all,

 

I've been trying to fix flexbox issues in IE11 following examples such as this and this but no difference is being made regardless of what extensions I add on. Here is an example of what I'm trying to do and below are some comparison pictures between IE11 and Firefox 52 (note the title extends to the far right and causes an undesired horizontal scrollbar).

 

 

 

Thanks in advance!

The issue was that for older browsers flex-basis needs to be specified (in fact all three values of flex need to be specified) to fix it needed to use flex: 0 1 100%;. Credit to pdrittenhouse in CodeNewbie slack.

I wouldn't use flexbox for full page layout, it's slower to render and there are other better supported layout options that have been around for a long time.

 

The only time I use flexbox is when I want equal height grid items, need more control over ordering of items than left-to right (which is controllable with inline blocks)

 

As you can see here http://caniuse.com/#search=flexbox IE11 has only partial flexbox support due to the large quantity of bugs. If you insist on using it also make sure that you are using autoprefixer to handle all your vendor prefixes and legacy flexbox property declarations - there are quite a few as the spec evolved over time.

There's nothing I can see in the screenshot above that warrants flexbox. You're going to come up against browser issues and poor compatibility, when you could just use inline-block. Flexbox has its uses but it shouldn't be relied upon, especially for the entire layout.