Flexbox在IE11中没有填充高度

我有这个案子:

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区域都不会填充包装器的整个高度.

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

1> Kostas Siaba..：

---

这是一个已知的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;
}

笔在这里.

---

当包装器不是"100vh"时,是否存在通用解决方案？我有一个由div组成的"表",只是希望连续的每个列单元格都是相同的高度.所以我在`row` div上有`display:flex`,这会在Chrome中产生所需的行为,但是在IE中,如果一个单元格有很多内容,而相邻的单元格内容很少,那么内容很少的单元格就不会伸展垂直与具有大量内容的单元格的高度相同.