Why is HTML holy grail with flex works on Chrome but not on Firefox?

Question

The code: http://plnkr.co/edit/swHKE2?p=preview. See snippet below as well.

The code is an example of the Holy grail.

On Chrome (v46.0.2490.80 m) it works perfectly - has header, footer, sides and only content is scrollable without hiding the frame.

On FF (v42.0), the vertical scroll is on everything, ignoring the flex directive.

Any idea how to fix the styling to have the right behavior on FF? Thanks.

<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>

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

This has to do with the flexbox specification's implied minimum sizing algorithm.

~~I believe this is a Firefox bug.~~

Adding min-width: 0; min-height: 0 to the first nested flex container seems to do the trick:

<body style="display: flex; height: 100%; flex-direction: column">
  <div>HEADER<br/>------------
  </div>
  <!-- No need for 'flex-direction: row' because it's the default value -->
  <div style="display: flex; flex: 1; min-width: 0; min-height: 0;"> <!-- ADJUSTEMENT -->
    <div>NAV|</div>
          ...
          ...
          ...
          ...

More information:

Why is HTML holy grail with flex works on Chrome but not on Firefox?

1 Answers1