title: CSS Flexbox layout issue on Firefox
body: <p>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:  </p>
  
  <pre><code>&lt;div style="height: 100vh; max-height: 100vh; display: flex;flex-direction: column;" class="wrapper"&gt;
    &lt;div style="flex: 1;"&gt;
      Top Nav
    &lt;/div&gt;
    &lt;div style="flex: 2; display: flex; flex-direction: row;"&gt;
      &lt;div style="flex: 1;"&gt;
        Side Nav
      &lt;/div&gt;
      &lt;div style="flex: 3; overflow: scroll;"&gt;
        &lt;div style="height: 1500px;"&gt;this should scroll...&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;
      footer
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/V1Dk9dzEykOQXI3bI1HU?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/V1Dk9dzEykOQXI3bI1HU?p=preview</a></p>
  
  <p>On firefox the whole page scrolls, but I only want the div:</p>
  
  <pre><code>&lt;div style="flex: 3; overflow: scroll;"&gt; 
  </code></pre>
  
  <p>to be where content scrolls, it works as expected on chrome, but not so much on Firefox.  What am I doing wrong?  </p>