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>

​

Answer 2

我也遇到过类似的情况：

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

没有起作用，但是这个：

.container {height: 500px;}

在IE中是完全对齐的。

声明特定的高度而不是auto应该可以。