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: http://imgur.com/a/eNKIJ

On Chrome: http://imgur.com/a/xYmJW

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?

Answer 1

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>