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

Question

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

我将其简化为这个简单的示例：我正在尝试创建一个 100% 高度的 div，其中包含一个 flex 子元素，该子元素也可以增长到 100% 高度。它适用于 chrome 和 Firefox，但在 IE 上，flex child 的高度没有增长......

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

我也遇到过类似的情况：

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

没用，但是这个：

.container {height: 500px;}

在 IE 中完美对齐。

声明特定高度而不是auto 应该可以工作..

Answer 2

似乎 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>