flex-grow not working in internet explorer 11

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 ?

Answers


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;
}

IE requires flex: 1 1 auto

it doesn’t understand flex: 1


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).


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>

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


Need Your Help

Parse errors are not displayed

php iis-6 error-reporting

I want PHP to display parse errors on screen. What I get instead is a blank page. Nothing gets written to server's error log file.