1

I want a flexbox child to be shrinked by becoming scrollable. I have created this (jsfiddle) which works in Chrome, but not in Firefox:

  • In Chrome, when the frame is shrunk vertically so that the content of the green section doesn't fit, the green section becomes scrollable. The main frame does not have a scrollbar.

  • In Firefox however, the whole frame becomes gains a scrollbar, and the scrollbar of the green section is always disabled.

HTML:

<div class="flex-column" style="height: 100%">
  <div style="background-color: red">
    Foo
  </div>
  <div class="flex-column flex-shrink1">
    <div class="flex-column flex-shrink1" style="overflow-y: scroll; background-color: green">
      Bar<br>Bar<br>Bar<br>Bar<br>
      Bar<br>Bar<br>Bar<br>Bar<br>
      Bar<br>Bar<br>Bar<br>Bar<br>
      Bar<br>Bar<br>Bar<br>Bar<br>
    </div>
  </div>
</div>

CSS:

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column>* {
    flex-shrink: 0;
}

.flex-shrink1 {
    flex-shrink: 1;
}

UPDATE: The fix for Firefox is to add style min-height: 0 to the div which contains the scrollable div, and possibly parent flex items when using nested flex layouts (see 2, 3). However, this does not resolve the problem on Internet Explorer 11.

Community
  • 1
  • 1
Ambroz Bizjak
  • 7,809
  • 1
  • 38
  • 49
  • Add `min-height: 0` to `.flex-column`. Details here: [Why doesn't flex item shrink past content size?](http://stackoverflow.com/q/36247140/3597276) – Michael Benjamin Jun 11 '16 at 13:40
  • Also, because FF is rendering correctly, expect future versions of Chrome to also need the `min-height: 0` / `min-width: 0` override. – Michael Benjamin Jun 11 '16 at 13:43
  • @Michael_B Thanks, I've already found the solution. But I'm wondering, since I have multiple nested flex columns, why did I need to apply this min-height:0 also to all the parents? Jsfiddle: https://jsfiddle.net/tj8t958a/ , it doesn't in FF work unless both of these min-height:0 are present. – Ambroz Bizjak Jun 11 '16 at 13:48
  • Because you're creating multiple containers, the children at each level become flex items. The default minimum size for flex items is the size of the content. Hence, you will need to override `min-height: auto` for nested children. See my link above for more details. – Michael Benjamin Jun 11 '16 at 13:53
  • @Michael_B However, I find it does not work on IE11. Same problem as was in Firefox without the min-height fix, but on IE11 that doesn't fix it. – Ambroz Bizjak Jun 11 '16 at 14:58
  • I'll come back to this when I'm back at my PC. May be worthwhile to reopen this question and post a complete cross-browser solution. – Michael Benjamin Jun 11 '16 at 15:43

0 Answers0