html - Firefox中Flexbox中的垂直滚动渲染问题

这个问题已经有了答案：
Why don't flex items shrink past content size?
1个答案
我希望在父级中包含一个灵活项，这样它就不会溢出父级之外。只有flex项应该有滚动条（如果需要）。
我的样式在Chrome和IE11中很好用，但不是火狐。我怀疑在对flex-basis上设置的#wrapper样式的解释上存在差异，但我不明白为什么火狐呈现出不同的效果。
下面是Chrome中所需的渲染：
下面是在火狐中发生的事情：
我可以通过添加“#left { height: calc(100vh - 50px); }”来应用“duct tape”修复，但如果可能的话，我更愿意确定实际的不一致性。

body, html, h1 {
  padding: 0;
  margin: 0;
}
header {
  background-color: rgba(0, 255, 255, 0.2);
  height: 50px;
}
#main {
  height: 100vh;
  background-color: rgba(0, 255, 255, 0.1);
  display: flex;
  flex-flow: column;
}
#wrapper {
  display: flex;
  flex-grow: 2;
  flex-basis: 0%;
}
#left {
  overflow-y: scroll;
  background-color: rgba(0, 255, 255, 0.2);
  width: 30%;
}
.box {
  margin: 5px 0;
  height: 50px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

<div id="main">
  <header>
    <h1>Header</h1>
  </header>
  <div id="wrapper">
    <div id="left">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</div>

最佳答案

这与flexbox规范的implied minimum sizing algorithm有关。
这是一个Firefox bug。
将min-width: 0; min-height: 0添加到#wrapper似乎可以做到这一点：

#wrapper {
    display: flex;
    flex-grow: 2;
    flex-basis: 0%;
    min-height: 0; /* NEW */
    min-width: 0; /* NEW */
}

DEMO
下面的原始答案
目前您已将overflow-y: scroll应用于#left。
如果您还将overflow-y: scroll应用于#wrapper，垂直滚动将在Firefox中启动。
至于为什么火狐对代码的解释不同于Chrome，我不能说。渲染引擎有它们的区别。我最近给另一个人打过电话：
更多信息：
flexbox interpretation issue between IE11 and Chrome
Bug 1043520 - (minsizeauto-fallout) Tracking bug for web content breaking due to new "min-width:auto" / "min-height:auto" behavior on flex items
演示：Bug 570036 - Flexible box does not allow overflow scrolling of children elements without extra markup（滚动在ff中工作）
http://jsfiddle.net/seqgz8qv/
Scroll not working with CSS3 flex box in Firefox
Flexbox and vertical scroll in a full-height app using NEWER flexbox api