Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 8 months ago.
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 ?
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).
I will use -ms-flex: 1 1 auto;
Because IE has not full support for flex. Should be with prefix.
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>
