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

Question

我想在父项中包含一个flex项,以便它不会溢出父项之外.只有弹性项目应该有一个滚动条(如果需要).

我的样式在Chrome和IE11中运行良好,但不适用于Firefox.我怀疑在flex-basis设置的样式的解释上有所不同#wrapper,但我无法弄清楚为什么Firefox以不同的方式呈现.

这是Chrome中所需的渲染:

这是Firefox中发生的事情:

我可以通过添加来应用"胶带"修复#left { height: calc(100vh - 50px); },但如果可能的话,我更愿意确定实际的不一致性.

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>

Answer 1

这与flexbox规范隐含的最小尺寸算法有关.

这是一个Firefox错误.

添加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启动.

至于为什么Firefox解释代码的方式与Chrome不同,我不能说.渲染引擎有其不同之处.我最近解决了IE11和Chrome之间的另一个flexbox解释问题:

更多信息:

• 错误1043520 - (minsizeauto-fallout)由于Flex项目上的新"min-width:auto"/"min-height:auto"行为导致Web内容中断的跟踪错误

• 错误570036 - 灵活的框不允许子元素的溢出滚动而没有额外的标记

• 演示:http://jsfiddle.net/seqgz8qv/(滚动在FF中工作)

• 在Firefox中滚动不使用CSS3 flex box

• 使用NEWER flexbox api在全高应用程序中进行Flexbox和垂直滚动

• 滚动带有溢出内容的Flexbox