Question

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

我把它简化为这个简单的例子：我试图拥有一个100％高度的div，里面有一个flex子，也增长到100％的高度。它适用于chrome和Firefox，但在IE上，flex儿童的身高并没有增长......

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%;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我有一个类似的案例：

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

没有用，但是这个：

.container {height: 500px;}

在IE中完全一致。

声明特定高度而不是auto应该有效，但如果内容的高度未知，我仍然无法找到使用flexbox的IE解决方案。如果你这样做，请发帖。

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

2 个答案: