Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]

Question

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.

Answer 1

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