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 bug很遗憾被IE小组关闭为Won't Fix，描述如下：

  

在支持flexbox的所有其他浏览器中，基于flex-direction:column的Flex容器将使用容器min-height来计算flex-grow长度。在IE10＆amp; 11预览它似乎只能使用明确的height值。

AFAIK，尽管如此描述，当flex-direction为row时，该错误也适用。正如评论中所提到的，Philip Walton提出了一个解决方案here，其中包括将高度设置为固定值，但这不是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;
}

笔here。