在 Firefox 和 Chrome 48 中使用 flexbox 的渲染问题 [英] Rendering problems using flexbox in Firefox and Chrome 48

问题描述

在 chrome 47 上(正确的行为):在 chrome 47 上，带有 .scroll 的 div 正确滚动，使用 flex 将高度设为 100%.

在 Firefox 上(错误行为):在 Firefox 上，带有 .scroll 的 div 正在使用内容高度并且不能正确滚动.

这个问题的跨浏览器解决方案是什么?

http://jsfiddle.net/d4nkevee/

for (var i = 0; i <100; i++)$(".scroll").append("动态内容
");

body,html {边距:0；填充:0；}.容器 {box-sizing: 边框框；位置:绝对；高度:100%；宽度:100%；显示:弹性；弹性方向:列；}.内容 {背景:黄色；弹性:1；显示:弹性；弹性方向:列；}.滚动{弹性:1 1 自动；溢出:滚动；}

<div class="bar">小</div><div class="内容"><div>静态内容</div><div class="scroll"></div><div>静态内容</div>
<div class="footer">小</div>

<小时>

问题已更新以区分 Chrome 47 和 Chrome 48.

解决方案

Flexbox 规范已更新，使 flex 项目的默认最小尺寸等于内容的尺寸:min-width: auto/min-height: auto.

您可以使用 min-width: 0/min-height: 0:

覆盖此设置

.content {背景:黄色；弹性:1；显示:弹性；弹性方向:列；最小高度:0；/* 新的 */最小宽度:0；/* 新的 */}

http://jsfiddle.net/d4nkevee/1/

错误报告:https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

以下是规范中的一些详细信息:

<块引用>

4.5.Flex 的隐含最小尺寸项目

为了为弹性项目提供更合理的默认最小尺寸，这规范引入了一个新的 auto 值作为初始值CSS 2.1 中定义的 min-width 和 min-height 属性.(阅读更多)

<小时>

更新

Chrome 似乎已更新其呈现行为.Chrome 48 现在在最小 flex 大小方面模拟 Firefox.

根据以下链接中的报告，上述解决方案应该也适用于 Chrome 48.

• 可能的 Chrome 48 flexbox 错误导致布局问题.#6841
• 问题 580196:嵌套的flex-direction:column"元素不t 适当收缩

On chrome 47 (correct behavior): On chrome 47, that div with .scroll is scrolling correctly, taking height 100% using flex.

On firefox (wrong behavior): While on firefox, that div with .scroll is using the content height and not scrolling properly.

What is the cross-browser solution to this problem?

http://jsfiddle.net/d4nkevee/

for (var i = 0; i < 100; i++)
  $(".scroll").append("Dynamic content<br>");

body,
html {
  margin: 0;
  padding: 0;
}
.container {
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  background: yellow;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.scroll {
  flex: 1 1 auto;
  overflow: scroll;
}

<div class="container">
  
  <div class="bar">Small</div>
  
  <div class="content">
    
    <div>Static content</div>
    <div class="scroll"></div>
    <div>Static content</div>
    
  </div>
  
  <div class="footer">Small</div>
  
</div>

---

Question updated to distinguish between Chrome 47 and Chrome 48.

解决方案

The flexbox specification was updated making the default minimum size of flex items equal to the size of the content: min-width: auto / min-height: auto.

You can override this setting with min-width: 0 / min-height: 0:

.content {
    background: yellow;
    flex: 1;
    display: flex;
    flex-direction: column;

    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

http://jsfiddle.net/d4nkevee/1/

Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

Here are some details from the spec:

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1. (read more)

---

UPDATE

It appears that Chrome has updated their rendering behavior. Chrome 48 now emulates Firefox in terms of minimum flex sizing.

Based on reports in the following links, the solution above should work in Chrome 48, as well.

• Possible Chrome 48 flexbox bug causing layout issues. #6841
• Issue 580196: Nested 'flex-direction:column' elements don't shrink properly

这篇关于在 Firefox 和 Chrome 48 中使用 flexbox 的渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！