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

Question

我想在父项中包含一个flex项，以便它不会溢出父项之外。只有flex项目应该有一个滚动条（如果需要）。

我的样式在Chrome和IE11中运行良好，但不适用于Firefox。我怀疑<f:if condition="{yourNameSpace:notEmptyOrIsZero(value: myValue)}"> <f:then>Now it recognizes 0 as a value</f:then> <f:else>It still DOESN'T recognize 0 as a value</f:else> </f:if> 上flex-basis样式集的解释存在差异，但我无法弄清楚为什么Firefox会以不同的方式呈现这一点。

这是Chrome中所需的渲染效果：

这就是Firefox中发生的事情：

我可以使用＆＃34;胶带＆＃34;通过添加#wrapper进行修复，但如果可能的话，我更愿意确定实际的不一致。

＆＃13;

＆＃13;

#left { height: calc(100vh - 50px); }

＆＃13;

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);
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

这与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中启动垂直滚动。

至于为什么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

• DEMO：http://jsfiddle.net/seqgz8qv/（滚动在FF中工作）

• Scroll not working with CSS3 flex box in Firefox

• Flexbox and vertical scroll in a full-height app using NEWER flexbox api

的
• 的 的

  的 Scrolling a flexbox with overflowing content 的