Css Flexbox不符合IE11中的填充高度

我有这个案子：

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

这是浏览器之间的不一致。这是虫子吗？我遗漏了什么吗？

这是一个已知的问题，不幸地被IE团队关闭，因为

无法修复，描述如下：

在支持flexbox的所有其他浏览器中，基于
flex-direction:column
的flex容器将使用容器
minheight
来计算
flex-grow
长度。在IE10&11预览中，它似乎只适用于显式的
height
值

好的，尽管有这样的描述，当
弹性方向
为
行
时，该错误也适用。如评论中所述，Philip Walton提出了一种解决方案，其中包括将高度设置为固定值，但这不是OP的选项

作为一种解决方法，我建议将
最小高度：100vh
也设置到
主
元素：

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

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

笔。
我目前无法访问IE11，所以只能猜测。您是否尝试过在
.wrapper
上显式设置
对齐项目：拉伸
？它是否会对其他值做出反应，例如
center
或
flex-end
？我尝试过，但没有成功：（它与其他人一起工作。我怀疑stretch与
100vh
之间可能存在冲突，因为
min height
对
.wrapper
有效，而
align items
属性对flex子项产生影响，而不是对flex容器本身。几乎是：嗯……对我的armcha来说就是这样。）ir分析：）当包装器不是
100vh
时，是否有通用解决方案？我有一个“表”由div组成，只是希望一行中的每个列单元格都具有相同的高度。因此，我在
行
div上设置了
display:flex
，这在Chrome中创建了所需的行为，但在IE中，如果一个单元格有很多内容，而相邻的单元格几乎没有内容，那么内容很少的单元格就不会垂直延伸到相同的高度与包含大量内容的单元格一样亮。显示：表格？