IE11中的Flex-grow不会垂直拉伸

Question

我认为IE 11完全支持flexbox属性,但我得到的行为与Chrome/Firefox不同

我把它简化为这个简单的例子:我试图拥有一个100%的高度div,里面有一个flex子,也增长到100%的高度.它适用于Chrome和Firefox,但在IE上,flex儿童身高不会增长......

小提琴: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>

在IE11上:http://imgur.com/a/eNKIJ

在Chrome上:http://imgur.com/a/xYmJW

我知道有可能在没有使用flexbox的情况下实现这一目标,但在我的真实情况下,我真的需要在这里使用flexbox,这有什么问题,我怎样才能在IE11上使用flexbox实现这一点？

Answer 1

似乎IE11只有一个问题min-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>