Geek Answers Handbook

Problems rendering with flexbox in Firefox and Chrome 48

On chrome 47 (correct behavior): On chrome 47, this div with .scroll scrolls correctly, assuming 100% height with flex.

In firefox (wrong behavior): Although in firefox this div with .scroll uses the height of the content and does not scroll properly.

What is a 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.

+6
source share
1 answer

The flexbox specification has been updated so that the default minimum element size equal to the content size is 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. Minimum Flex element size implied

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

UPDATE

It looks like Chrome has updated its behavior. Chrome 48 now emulates Firefox in terms of minimal flexibility.

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

+13
source

More articles:


All Articles