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

Question

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?

Just an update to this old question: The linked demo works fine on IE11. Must have been a bug fixed in the 3 years since this was asked. — Daryl, May 10 '17 at 15:16

score 159 · Answer 1 · answered Apr 05 '14 at 15:54

159

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!

answered Apr 05 '14 at 15:54

Odisseas

1,652
1
9
5

1

I think that means IE10 needs `-ms-flex: 1 0 0;` and IE11 `flex: 1 0 0;`..? – Eystein Nov 10 '14 at 11:26
20

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. – Eystein Nov 23 '14 at 13:00
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... – Odisseas Dec 17 '14 at 15:26
2

The core issue with IE11 is the way it calculates `flex-basis`. [Github](https://github.com/philipwalton/flexbugs/issues/71) 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. – P.Brian.Mackey Oct 26 '16 at 15:33
From http://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.. – Henry Neo Jan 19 '17 at 03:29
This, along with `height:100%` on `html,body` appears to have fixed it for me. Cheers. – Kenmore Mar 02 '18 at 05:47
I had to change `flex: 1 0 0` to `flex 1 0 0px` in order to get it working in IE11. – undefined Oct 10 '18 at 16:19
Thanks, this is very helpful for me :) – Adam Pavlov Oct 22 '18 at 05:16

score 51 · Answer 2 · edited Nov 21 '19 at 15:10

51

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.

edited Nov 21 '19 at 15:10

isherwood

58,414
16
114
157

answered Sep 03 '16 at 09:09

BeliG

528
4
7

3

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; }` – Mark Horgan Feb 26 '17 at 08:32
I know this is 2 years old, but thank you! I was following this https://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. – TyCobb May 16 '18 at 04:35

score 41 · Answer 3 · edited Feb 24 '17 at 20:39

41

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/

edited Feb 24 '17 at 20:39

Charlie

8,530
2
55
53

answered Aug 03 '15 at 11:28

Ashok Kumar Gupta

984
7
9

Could you please explain more about this issue: Is there a "clean" possibility to get the "Media Object" example working in IE? – Ashok Kumar Gupta Aug 03 '15 at 12:52
1

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: http://jsfiddle.net/Skateside/nezdrrkr/ – James Long Aug 27 '15 at 16:41
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. http://jsfiddle.net/3tpuryso/65/ – FoolishSeth Feb 24 '16 at 17:54
@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 – Odisseas Mar 19 '16 at 11:30
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). – zanther Jun 27 '17 at 09:33
100% height here fixed issues for me. – Neil Morgan Apr 29 '20 at 15:20

score 0 · Answer 4 · edited May 09 '18 at 21:59

Here is an example of using flex that also works in Internet Explorer 11 and Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

Please give additional information - instead of just pasting your `Html`. — Peter, Jul 04 '17 at 08:24
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. — Erty Seidohl, May 09 '18 at 14:37

score 0 · Answer 5 · answered Jun 19 '19 at 13:31

0

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.

answered Jun 19 '19 at 13:31

Marsel Gray

73
1
12

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

5 Answers5

Linked