title: Firefox and Chrome flexbox different behaviour overflow-y with nested blocks
body: <p><em>My web page sample (looks different in Chrome and Firefox):</em></p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;Firefox vs Chrome&lt;/title&gt;
  
    &lt;/head&gt;
  
    &lt;body style="margin:  0px;"&gt;
      &lt;div id="root" style="display: flex;flex-direction: column;height:  100vh;"&gt;
        &lt;header style="background: orange;flex: 0 0 auto;height: 200px;"&gt;Header&lt;/header&gt;
  
        &lt;div id="sub-1" style="flex: 1 1 auto;background: blue;display:  flex;"&gt;
          &lt;div id="sub-2" style="overflow: auto;display: flex;flex: 1 1 auto;"&gt;
            &lt;div id="content" style="height: 2000px;flex: 1;"&gt;
               Content
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Result in Chrome (as expected):</strong></p>
  
  <p><a href="https://i.stack.imgur.com/kcSfy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kcSfy.png" alt="enter image description here"></a></p>
  
  <p><strong>Result in Firefox (bug???)</strong></p>
  
  <p><a href="https://i.stack.imgur.com/y7m1Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y7m1Q.png" alt="enter image description here"></a></p>