Firefox Flexbox 中的垂直滚动渲染问题 [英] Vertical scroll rendering issue in Flexbox in Firefox

问题描述

我想在父项中包含一个 flex 项，这样它就不会溢出到父项之外.只有 flex 项应该有滚动条(如有必要).

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

这是在 Chrome 中看到的所需渲染:

这是在 Firefox 中发生的事情:

我可以通过添加 #left { height: calc(100vh - 50px);}，但如果可能的话，我更愿意找出实际的不一致之处.

body, html, h1 {填充:0；边距:0；}标题{背景颜色:rgba(0, 255, 255, 0.2);高度:50px；}#主要的 {高度:100vh；背景颜色:rgba(0, 255, 255, 0.1);显示:弹性；弹性流:列；}#包装{显示:弹性；弹性增长:2；弹性基础:0%；}#剩下 {溢出-y:滚动；背景颜色:rgba(0, 255, 255, 0.2);宽度:30%；}.盒子 {边距:5px 0;高度:50px；宽度:100%；背景颜色:rgba(0, 0, 0, 0.2);}

<标题><h1>标题</h1></标题><div id="包装器"><div id="左"><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>

解决方案

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

这是一个 Firefox 错误.

添加min-width: 0;min-height: 0 到 #wrapper 似乎可以解决问题:

#wrapper {显示:弹性；弹性增长:2；弹性基础:0%；最小高度:0；/* 新的 */最小宽度:0；/* 新的 */}

演示

<小时>

下面的原始答案

目前您已将 overflow-y: scroll 应用于 #left.

如果您还将 overflow-y: scroll 应用到 #wrapper，则垂直滚动会在 Firefox 中启动.

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

更多信息:

• 错误 1043520 - (minsizeauto-fallout) 跟踪网页内容破坏的错误由于弹性项目上新的min-width:auto"/min-height:auto"行为

• 错误 570036 - 弹性框不允许子元素溢出滚动额外的标记

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

• 滚动不使用 CSS3 弹性框火狐

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

• 滚动带有溢出内容的 flexbox

I want to contain a flex item within the parent so that it does not spill outside of the parent. Only the flex item should have a scrollbar (if necessary).

My styling works fine within Chrome and IE11, but not Firefox. I suspect there is a difference in interpretation of the flex-basis style set on #wrapper, but I cannot figure out why Firefox renders this differently.

Here's the desired rendering as seen in Chrome:

And here's what happens in Firefox:

I could apply a "duct tape" fix by adding #left { height: calc(100vh - 50px); }, but I'd prefer to identify the actual inconsistency if possible.

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>

解决方案

This has to do with the flexbox specification's implied minimum sizing algorithm.

This is a Firefox bug.

Adding min-width: 0; min-height: 0 to #wrapper seems to do the trick:

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

DEMO

---

Original Answer Below

Currently you have overflow-y: scroll applied to #left.

If you also apply overflow-y: scroll to #wrapper, the vertical scroll launches in Firefox.

As to why Firefox interprets the code differently than Chrome I can't say. The rendering engines have their differences. I recently addressed another flexbox interpretation issue between IE11 and Chrome:

More information:

• 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/ (scroll works in 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

这篇关于Firefox Flexbox 中的垂直滚动渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！