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 和 11 预览版中，它似乎只适用于明确的 height 值。

AFAIK 尽管有这个描述，但当flex-direction 是row 时，该错误也适用。正如 cmets 中提到的，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。