css - IE11 中的 Flexbox 不填充高度

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 并描述如下:

In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

据我所知，尽管有此描述，但当 flex-direction 为 row 时，该错误也适用。正如评论中提到的，Philip Walton 提出了一个解决方案 here ，其中包括将高度设置为固定值，但这不是 OP 的选项。

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

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

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

笔here .