title: Scrollable flex column pushes document height over 100%, resulting in 2 scrollbars
body: <p>I have a flexbox with 2 rows. In the second row I have a flexbox with 2 columns and the second column becomes scrollable when the content overflows. However, when it becomes scrollable, the document becomes scrollable also (a tiny bit - as if the first row's height is added to the document's height).</p>
  <p>I have set 100% heights to all parents and debugged a lot but couldn't fix this. I can't see what's going wrong.</p>
  <p>I duplicated the issue in this Js Bin: <a href="https://jsbin.com/lesoledoqo/1/edit?html,output" rel="nofollow noreferrer">https://jsbin.com/lesoledoqo/1/edit?html,output</a></p>
  <p>Any ideas?</p>
  <p>Code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html style=&quot;height: 100%;&quot;&gt;
  
  &lt;body style=&quot;height: 100%; padding: 0; margin: 0;&quot;&gt;
     &lt;div style=&quot;display: flex; flex-direction: column; height: 100%;&quot;&gt;
        &lt;div style=&quot; background-color: gray&quot;&gt;
           Content 1
        &lt;/div&gt;
        &lt;div style=&quot;display: flex; background-color: green; height: 100%;&quot;&gt;
           &lt;div style=&quot;background-color: blue;&quot;&gt;
              Content 2.1
           &lt;/div&gt;
           &lt;div style=&quot;background-color: yellow; height: 100%; overflow-y: auto;&quot;&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
                          Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
                          Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
                          Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
                         Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
                         Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
                         Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
                         Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2&lt;br /&gt;
              Content 2.2
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>