IE11忽略CSS中的背景颜色

Question

请参阅此代码：

<div class="wrapper">
  <div id="menubar">
    jsdhfsdjkfhj
  </div>
</div>

这个CSS：

.wrapper{
  display:          flex;
  flex:             1;
}

#menubar{
  min-height:           100%;
  flex:                 0 0 170px;
  background-color:     #404040;
  color:                white;
}

当我在Chrome或Firefox中查看该页面时，此DIV的背景颜色为＃404040，但当我在IE中查看时，它是白色的！

请帮我解决这个问题！

Answer 1

1. 截至2013年9月，根据草案规范，flex的IE10和IE11默认值为0 0 auto而不是0 1 auto。
2. 在IE10和IE11中，如果容器具有display: flex但没有明确的高度属性，则flex-direction: column和min-height的容器将无法正确计算其弯曲儿童的大小。

Answer 2

我使用

修复了它

 min-height:            calc(100vh - 60px);

（我的标题高度减去60px）。这似乎适用于所有支持flexbox的浏览器。