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

问题描述

在chrome 47（正确的行为）：
在Chrome 47上， .scroll 的div正确滚动， 100％使用flex。

在firefox（错误的行为）：
在firefox时，该div与



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

http://jsfiddle.net/d4nkevee/

  body，html {margin：0; padding：0;}。container {box-sizing：border-box; position：absolute;高度：100％;宽度：100％;显示：flex; flex-direction：column;}。content {background：yellow; flex：1;显示：flex; flex-direction：column;}。scroll {flex：1 1 auto; overflow：scroll;}  
 
 < div class = > < div class =bar>小< / div> < div class =content> < div>静态内容< / div> < div class =scroll>< / div> < div>静态内容< / div> < / div> < div class =footer>小< / div> < / div>  
 

---

问题已更新，可区分Chrome 47和Chrome 48。

解决方案

更新使flex项目的默认最小大小等于内容的大小： min-width：auto / min-height：auto 。

您可以覆盖此设置 min-width：0 / min-height：0 ：

  .content {
 background：yellow; 
 flex：1; 
 display： 
 flex-direction：column; 
 
 min-height：0; / * NEW * / 
 min-width：0; / * NEW * / 
} 
  

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

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

以下是规格的一些细节：

4.5。 Flex的默认最小大小
项

$ b $ p

为了提供更合理的默认最小大小，规范引入了一个新的 auto 值作为
的初始值 min-width 和 min-height 在CSS 2.1中定义的属性。 （了解详情）

---

UPDATE

Chrome似乎更新了其呈现行为。

根据以下链接中的报告，上述解决方案在Chrome 48中也可以正常工作。

• 可能的Chrome 48 flexbox导致布局问题的错误。 ＃6841


• 问题580196：嵌套的'flex-direction：column'元素不正确缩小

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屋！