Flexbox在IE11中没有填充高度

Question

我有这个案子：

http://codepen.io/anon/pen/radoPd?editors=110

这是CSS代码：

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  overflow-y: scroll;
}

出于某种原因，在IE11上，.sidebar和.main区域都不会填充包装器的整个高度。

这是浏览器之间的不一致。 这是一个错误吗？ 我错过了什么吗？

Answer 1

这是一个已知的IE漏洞 ，遗憾的是已被关闭，因为IE Team Won't Fix并描述如下：

在支持flexbox的所有其他浏览器中， flex-direction:column基于flex-direction:column的flex容器将遵循容器min-height来计算flex-grow长度。 在IE10和11-preview中，它似乎只能使用显式height值。

AFAIK，尽管有这样的描述，当flex-direction是row ，bug也适用。 正如评论中所提到的，菲利普沃尔顿在这里提出了一个解决方案，其中包括将高度设置为固定值，但这不是OP的选项。

作为一种解决方法，我建议将min-height: 100vh设置为main元素：

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  min-height: 100vh;
}

笔在这里 。