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错误,不幸的是已经被Won't FixIE团队关闭并描述如下:

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

据我所知,尽管这个描述,错误也适用时flex-direction是row.正如评论中所提到的,菲利普沃尔顿在这里提出了一个解决方案,其中包括将高度设置为固定值,但这不是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;
}

笔在这里.