Holy Grail-style single-page app UI in CSS Flexbox - scrolling panels not working in Firefox

Question

I'm attempting to code a Holy Grail-style single-page app UI using CSS Flexbox which meets the following criteria:

Overall container will take exactly 100% of the viewport height and only its internal panels will scroll
Static header
Fluid main content area, consisting of 2 content "panels" that will scroll using overflow-y when necessary
Static footer

The HTML for this setup looks as such:

<div class="container">
  <header>Header</header>

  <main role="main">
    <article class="box1">
      Article contents (Box 1)
    </article>

    <nav class="box2">
      Navbar contents (Box 2)
    </nav>
  </main>

  <footer>Footer</footer>
</div>

And the CSS (with prefixes omitted for simplicity):

html, body {
  height: 100%;
}

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

  height: 100%;
}

header {
  flex: none;

  height: 100px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.box1 {
  order: 2;
  flex: 3;

  overflow-y: auto;

  background-color: #BCD39B;
}

.box2 {
  order: 1;
  flex: 1;

  overflow-y: auto;

  background-color: #CE9B64;
}

footer {
  flex: none;

  height: 100px;
}

And here's a Codepen example: http://codepen.io/anon/pen/VeXgMK

If you fire it up, it works great in the newest Chrome (47) and Safari (9). However, the two main panels don't work at all in Firefox (44) - they neither respect their flex values nor scroll vertically as expected.

Firefox seems to dislike the use of flex-direction for some reason, but I'm not sure how to achieve my desired UI without it. I'd love to know what quirks I should be dealing with proactively to accomplish this layout effectively cross-browser.

add `min-height: 0` to `main` rule: http://stackoverflow.com/a/34982902/3597276 — Michael Benjamin, Jan 27 '16 at 01:16
No way! I had tried adding the `min-height` to the scrollable panels previously. Didn't realize it had to be added to the container element. Thanks! — J. Ky Marsh, Jan 27 '16 at 01:28

score 0 · Accepted Answer · edited May 23 '17 at 12:23

As answered by Michael_B: this is due to a bug in Firefox, and can be resolved by adding a min-height or min-width to the parent of the scrollable elements.

From the bug report - https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

I'm expecting that some content will break as a result of this change, though hopefully not very much. (and hopefully "min-width:0;min-height:0;" on the flex item in question should be sufficient to fix the bustage, in each case.)

Holy Grail-style single-page app UI in CSS Flexbox - scrolling panels not working in Firefox

1 Answers1