7

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
richardaum
  • 6,651
  • 12
  • 48
  • 64
  • 3
    The standard behavior is Firefox's one. And latest Chromium behaves like that too. – Oriol Jan 24 '16 at 23:51
  • Thank you for saying that! Considering it is a duplicate, should I remove this question? @Oriol – richardaum Jan 25 '16 at 00:00
  • Duplicate just means the question is closed to new answers. It's still good to keep for search purposes, as it may contain keywords not present in the dupe. – Michael Benjamin Jan 25 '16 at 00:05
  • @Richard Duplicates are not always bad, they can help other people to find the other question. In this case I think you couldn't remove it even if you wanted, because it has an upvoted answer. – Oriol Jan 25 '16 at 00:07

1 Answers1

15

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 2
    I knew that this community would help me to fix this unexplained bug. Thank you very much. It worked here like a charm! – richardaum Jan 24 '16 at 23:42
  • @Michael_B Out of curiosity, how does one go about finding a bug like this? Did you see it before this question? Create ten JSFiddles until you find the cause? Bribe a fortuneteller? – Leon Adler Feb 01 '16 at 19:55
  • 2
    @LeonAdler, searching deep in google using various keywords then, if necessary, following the links in the pages you find, until you end up at your destination (if it even exists). Be a human web crawler ;-) – Michael Benjamin Feb 01 '16 at 19:59
  • 1
    I was having this issue with Chrome 48.0.2564.103 on Mac. With this workaround, it's gone. Thanks. – legege Feb 07 '16 at 19:33
  • I had a similar situation where adding `min-height: 0` on children only partially solved the problem. After digging around, I found that mix of `min-height: 0` and `max-height: 100%` on children of a column-flexed container solves the firefox bug completely. – xpg94 Oct 18 '18 at 13:11