Flexbox and Internet Explorer 11 (display:flex in <html>?)

html css flexbox cross-browser

296,240

Solution 1

According to http://caniuse.com/#feat=flexbox:

"IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto, as per the draft spec, as of September 2013"

So in plain words, if somewhere in your CSS you have something like this: flex:1 , that is not translated the same way in all browsers. Try changing it to 1 0 0 and I believe you will immediately see that it -kinda- works.

The problem is that this solution will probably mess up firefox, but then you can use some hacks to target only Mozilla and change it back:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Since flexbox is a W3C Candidate and not official, browsers tend to give different results, but I guess that will change in the immediate future.

If someone has a better answer I would like to know!

Solution 2

Use another flex container to fix the min-height issue in IE10 and IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

See a working demo.

Don't use flexbox layout directly on body because it screws up elements inserted via jQuery plugins (autocomplete, popup, etc.).
Don't use height:100% or height:100vh on your container because the footer will stick at the bottom of window and won't adapt to long content.
Use flex-grow:1 rather than flex:1 cause IE10 and IE11 default values for flex are 0 0 auto and not 0 1 auto.

Solution 3

You just need flex:1; It will fix issue for the IE11. I second Odisseas. Additionally assign 100% height to html,body elements.

CSS changes:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

working url: http://jsfiddle.net/3tpuryso/13/

Solution 4

Sometimes it's as simple as adding: '-ms-' in front of the style Like -ms-flex-flow: row wrap; to get it to work also.

View more solutions

296,240

Author by

Kodekan

Updated on November 22, 2020

Comments

Kodekan over 3 years

I am planning to move away from "floaty" layouts and use CSS flexbox for future projects. I was delighted to see that all major browsers in their current versions seem to support (in one way or another) flexbox.

I headed over to "Solved by Flexbox" to look at some examples. However the "Sticky Footer" example does not seem to work in Internet Explorer 11. I played around a bit and got it to work by adding display:flex to the <html> and width:100% to the <body>

So my first question is: Can anybody explain that logic to me? I just fiddled around and it worked, but I don't quite understand why it worked that way...

Then there is the "Media Object" example that works in all browsers except for - you guessed it - Internet Explorer. I fiddled around with that, too, but without any success.

My second question therefore is: Is there a "clean" possibility to get the "Media Object" example working in Internet Explorer?
peg101 over 9 years

I think that means IE10 needs -ms-flex: 1 0 0; and IE11 flex: 1 0 0;..?
peg101 over 9 years

With Google Chrome 39 this suddenly stopped working for me. Took me ages to track down, but it was the specification of the third digit. Chrome 39 doesn't adhere to flex: 1 0 0;. But flex: 1 0 0%; (note the %) or flex: 1 0 auto; will work.
Odisseas over 9 years

Yes, this is true it broke some of my designs too! I fixed it by simply changing it to flex: 1; I guess it depends on what you are going for, though...
Ashok Kumar Gupta almost 9 years

Could you please explain more about this issue: Is there a "clean" possibility to get the "Media Object" example working in IE?
James Long over 8 years

This works for me. One thing I found (because it caught me out) is that if you have a containing element, the display: flex; and associated styles must be applied to both the body and container: jsfiddle.net/Skateside/nezdrrkr
FoolishSeth about 8 years

Setting html height to 100% appears to cause the content of main to cease growing properly (in chrome, at least); if you add enough content it will overrun the footer. jsfiddle.net/3tpuryso/65
Odisseas about 8 years

@FoolishSeth the way it is right now you are basically telling it to grow to 100% and not a pixel more. You should set the html to min-height: 100% instead, to follow along with your content
yairr over 7 years

The core issue with IE11 is the way it calculates flex-basis. Github has a good discussion of why flex:1 0 100% works in some cases for IE11 while flex: 1 0 0% or even flex: 1 0 auto works in others. You have to know the content ahead of time.
Henry Neo over 7 years

From caniuse.com/#feat=flexbox, it specifically mentioned under known issues that IE 11 requires a unit to be added to the third argument, the flex-basis property..
Mark Horgan about 7 years

I found I had to add flex-direction: column to .ie-fixMinHeight to avoid side-effects. If you don't have IE specific HTML you could use .fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }
zanther almost 7 years

Thanks! The part that was missing for me was not actually any of the flex attributes, but the height:100% on the containing element (which for me was a .pusher div because my site includes a responsive sidebar).
Peter almost 7 years

Please give additional information - instead of just pasting your Html.
Kenmore about 6 years

This, along with height:100% on html,body appears to have fixed it for me. Cheers.
Erty Seidohl about 6 years

While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked.
TyCobb about 6 years

I know this is 2 years old, but thank you! I was following this stackoverflow.com/a/24979148/359157 and fought forever trying to figure out why IE was busted while Edge and Chrome worked flawlessly. The height vs min-height was the key.
undefined over 5 years

I had to change flex: 1 0 0 to flex 1 0 0px in order to get it working in IE11.
Adam Pavlov over 5 years

Thanks, this is very helpful for me :)
trainoasis over 4 years

Sometimes, but most times not ;) Let's dump IE globally
Neil Morgan about 4 years

100% height here fixed issues for me.