CSS Flexbox layout issue on Firefox

Question

I have a simple layout that works great on Chrome, but doesn't seem to work on firefox and I could use some help. Here is the code:

<div style="height: 100vh; max-height: 100vh; display: flex;flex-direction: column;" class="wrapper">
  <div style="flex: 1;">
    Top Nav
  </div>
  <div style="flex: 2; display: flex; flex-direction: row;">
    <div style="flex: 1;">
      Side Nav
    </div>
    <div style="flex: 3; overflow: scroll;">
      <div style="height: 1500px;">this should scroll...</div>
    </div>
  </div>
  <div class="footer">
    footer
  </div>

https://plnkr.co/edit/V1Dk9dzEykOQXI3bI1HU?p=preview

On firefox the whole page scrolls, but I only want the div:

<div style="flex: 3; overflow: scroll;">

to be where content scrolls, it works as expected on chrome, but not so much on Firefox. What am I doing wrong?

Add `min-height: 0` to the second child of the primary flex container. — Michael Benjamin, May 01 '17 at 19:39
A flex item, by default, cannot be smaller than the size of its content. The initial setting is `min-height: auto`. This will prevent overflow (and, therefore, scrollbars) on a flex item. Firefox adheres to this part of the flexbox spec. Chrome has apparently decided to ignore it (I believe it used to respect it in previous versions). See the duplicate post for more details. — Michael Benjamin, May 01 '17 at 19:39

score 1 · Accepted Answer · answered May 01 '17 at 19:18

Looks like the element under "top nav" needs the overflow hidden.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      body, html {
            padding: 0;
            margin: 0;
        }
    </style>
  </head>

  <body>
    <div style="height: 100vh; max-height: 100vh; display: flex;flex-direction: column;" class="wrapper">
      <div style="flex: 1;">
        Top Nav
      </div>
      <div style="flex: 2; display: flex; flex-direction: row; overflow: hidden;">
        <div style="flex: 1;">
          Side Nav
        </div>
        <div style="flex: 3; overflow: scroll;">
          <div style="height: 1500px;">this should scroll...</div>
        </div>
      </div>
      <div class="footer">
        footer
      </div>
    </div>
  </body>
</html>

@csyperski it seems to be some sort of bug. I solved this through trial and error, but just searched around and looks like either `overflow` will work or using `min-height: 0` (or `min-width: 0`, if it were a flex row with horizontal overflow). http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox — Michael Coker, May 01 '17 at 19:25

Stickers · Answer 2 · 2017-05-01T19:48:16.297

You can add min-height: 0; to the middle div (between top nav and footer).

body {
  margin: 0;
}

<div style="height: 100vh; max-height: 100vh; display: flex;flex-direction: column;" class="wrapper">
  <div style="flex: 1;">
    Top Nav
  </div>
  <div style="flex: 2; min-height: 0; display: flex; flex-direction: row;">
    <div style="flex: 1;">
      Side Nav
    </div>
    <div style="flex: 3; overflow: scroll;">
      <div style="height: 1500px;">This should scroll...</div>
    </div>
  </div>
  <div class="footer">
    Footer
  </div>

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.

Chrome has not fully implemented that yet, but Firefox has it already. Follow this Chromium bug for more details.

CSS Flexbox layout issue on Firefox

2 Answers2