22

Hy

I'm having some trouble with flex in IE:

http://jsfiddle.net/EvvBH/

Notice that the #two element has flex: auto, which is supposed to expand it to fill the container, even if there's not enough content.

But it does that only in Chrome and Firefox. In IE it simply doesn't work.

is flex-grow not supported by IE ?

pstenstrm
  • 6,339
  • 5
  • 41
  • 62
katie
  • 991
  • 2
  • 11
  • 19

5 Answers5

61

In Case someone is trying this not on body but some child div. You can just set height: 0; on the element with the min-height.

IE just wants any height on the parent element of the flex-grow auto element.

So it could look like this:

.flex-parent{
  display: flex;
  min-height: 300px;
  height: 0;
}
.flex-child{
  flex: 1 1 auto;
}
Rory
  • 852
  • 7
  • 12
  • 9
    it's not a good idea, if your block is longer then current window height – brabertaser19 Oct 18 '17 at 08:38
  • 3
    height:0 in the parent element fixed this for me. Thanks!!! – Ominus Jan 25 '18 at 17:54
  • nice one son, this one fixed it for me, gonna go get schwifty now – Tristanisginger Feb 28 '19 at 18:28
  • 1
    This prevents the element growing past the min-height. – Jake Apr 18 '19 at 17:35
  • 2
    I had set `min-height: 100vh` and nothing happened in IE11. Adding `height: 100vh` worked. Overflow still behaves as normal (i.e. if the content doesn't fit in the child it still expands normally beyond the viewport). – Alan Plum Jul 24 '19 at 09:56
  • The height didn't work for me, as that limited the size of the page. The following fixed it for me though: https://stackoverflow.com/questions/44700068/how-to-make-a-sticky-footer-using-flexbox-in-ie11 - in particular, this sentence: "IE has a min-height bug and needs display: flex on the flex column containers parent [...]", thus I needed to make the parent of the parent a flexbox too. – EmpireJones Dec 13 '19 at 21:19
  • this does not work correctly, the footer is not attached to the end of the page, but to the place where the bottom of the viewport was when the page loaded. [test online in browserling](https://www.browserling.com/browse/win7/ie11/https://jsbin.com/covabahubo/1/edit?html,css,output). No need to set a `height`, you only [need](https://stackoverflow.com/a/44700256/4854931) a `flex: 1 1 auto`. – Alex78191 Jul 07 '22 at 17:12
20

IE requires flex: 1 1 auto

it doesn’t understand flex: 1

William
  • 600
  • 5
  • 14
11

This happens because you use the min-height on the <body> to get full height. For internet explorer, you need to use the height property (use 100% or 100vh).

Johan Gorter
  • 1,253
  • 10
  • 13
  • Good catch! I could not figure it out! Thank you. – Ploppy Feb 04 '21 at 13:30
  • this does not work correctly, the footer is not attached to the end of the page, but to the place where the bottom of the viewport was when the page loaded. [test online in browserling](https://www.browserling.com/browse/win7/ie11/https://jsbin.com/zaxavoxeba/1/edit?html,css,output). No need to set a `height`, you only [need](https://stackoverflow.com/a/44700256/4854931) a `flex: 1 1 auto`. – Alex78191 Jul 07 '22 at 17:15
0

Not really sure what you're trying to achieve but that's not how the Flexbox layouts work. To use the 'flex' property on an element it needs to be within a parent element which has the 'display:flex' property.

<style>
    #flexContainer {
        display: flex;
    }
    #item1 {
        width: 50px;
        background: #66CC33;
        flex: 1;
    }
    #item2 {
        width: 50px;
        background: #0099FF;
        flex: 5;
    }
    #item3 {
        width: 50px;
        background: #66CC33;
        flex: 10;
    }
</style>

<html>
    <div id="flexContainer">
        <div id="item1">1</div>
        <div id="item2">2</div>
        <div id="item3">3</div>
    </div>
</html>
user341234
  • 1
0

I will use -ms-flex: 1 1 auto; Because IE has not full support for flex. Should be with prefix.

Nienormalny_
  • 460
  • 3
  • 14