Flex-grow in IE11 doesn't vertically stretch

Question

I thought that IE 11 had full support for flexbox properties but I get a different behavior than on Chrome/Firefox

I simplified it to this simple example: I'm trying to have a 100% height div with a flex child inside that also grows to 100% height. It works in chrome and Firefox but on IE the flex child doesn't grow in height...

Fiddle: https://jsfiddle.net/7qgbkj0o/

body, html {
  background-color: red;
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin:0;
}
.p{
  display: flex;
  min-height: 100%;
}

.c1 {
  flex-grow: 1;
  background-color: gray;
}

<div class="p">
<div class="c1">
  asdasd
</div>
</div>

On IE11: https://i.stack.imgur.com/bh9sn.jpg

On Chrome: https://i.stack.imgur.com/srcnx.jpg

I know there are probably alternatives to achieve this without using flexbox but in my real world case I really need to use flexbox here so what's wrong and how can I achieve this on IE11 using flexbox?

Related - http://stackoverflow.com/questions/38528374/internet-explorer-doesnt-expand-a-flexbox-with-flex-direction-column?rq=1 — Paulie_D, Sep 21 '16 at 09:29

score 15 · Accepted Answer · answered Sep 21 '16 at 09:27

15

Seems IE11 has an issue with only having min-height.

Try adding a base height.

.p{
  display: flex;
  min-height:100%;
  height: 100%;
}

body,
html {
  background-color: red;
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.p {
  display: flex;
  min-height: 100%;
  height: 100%;
}
.c1 {
  flex: 1;
  background-color: gray;
}

<div class="p">
  <div class="c1">
    asdasd
  </div>
</div>

answered Sep 21 '16 at 09:27

Paulie_D

107,962
13
142
161

1

This works really well. But I noticed that IE11 is happy as soon as you set a height property on the flex container. `min-height: 100%; height: 1px` works just as well. – Viktor May 31 '18 at 14:12
Ok mental note. Flex column in ie11 requires a height property on the flex element if a child needs its `flex-grow` prop set. – stwilz Mar 05 '19 at 06:27
In my case, this didn't work for me when setting the height using a percentage unit. It only worked when I set it using a non-negative non-percentage unit. – papiro Jul 25 '19 at 22:15

score 0 · Answer 2 · edited Jul 01 '19 at 13:33

0

I had a similar case where this:

.container {min-height: 500px; height: auto;}

didn't work, but this:

.container {height: 500px;}

was perfectly aligned in IE.

Declaring specific height instead of auto should work..

edited Jul 01 '19 at 13:33

Bhargav Rao

50,140
28
121
140

answered May 16 '18 at 09:11

Nathalia Xavier

1,029
10
13

Flex-grow in IE11 doesn't vertically stretch

2 Answers2