title: Flex grow 1 doesn't allow proper scrolling
body: <p>I'm running into, what I think is, a tiny issue with flex. I'm trying to get a simple layout (as shown in the linked jsfiddle). However, when the div on the right (in color red) overflows in its height, the element overflows in the viewport and is only scrollable when it overflows the height of the viewport.</p>
  
  <p><a href="https://jsfiddle.net/MZein/tfrakgb0/" rel="nofollow noreferrer">JSfiddle</a></p>
  
  <p>I'm pretty sure it's because I'm using <code>height: 100%;</code> in a lot of elements, but I need them to be as big as they can be (to fill the viewport height completely).</p>
  
  <p>What I want is the viewport to be completely filled by these three sections: nav, left side-bar, and right content (see the following image). Where the right content section should be scrollable when it overflows the viewport.</p>
  
  <p><a href="https://i.stack.imgur.com/7Wjr7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Wjr7.png" alt="What I want"></a></p>
  
  <p>So, to come to a conclusion.. The issue here is that the scrollable content first overflows the viewport and when the div is (what it seems like) the same height as the viewport, it starts being scrollable. I obviously want the div to be scrollable when it overflows the viewport.</p>
  
  <p>What's wrong and what I want is basically described in the following image. <a href="https://i.stack.imgur.com/FCjWZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FCjWZ.png" alt="Left: what&#39;s wrong. Right: What I want"></a></p>
  
  <p>How would I achieve this? Thanks for your time.</p>
  
  <h2>Code (that is also available in the <a href="https://jsfiddle.net/MZein/tfrakgb0/" rel="nofollow noreferrer">JSFiddle</a>)</h2>
  
  <p><strong>HTML</strong>
      
        </p>
  
  <pre><code>  &lt;div id="content-container"&gt;
      &lt;div id="content"&gt;
        &lt;div id="left"&gt;
          IM LEFT
        &lt;/div&gt;
        &lt;div id="right"&gt;
          &lt;div id="inner"&gt;
            IM RIGHT
          &lt;/div&gt;
          IM RIGHT
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  #main {
    height: 100%;
    background: black;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100vw;
    height: 100vh;
  }
  
  #main nav {
    background: orange;
  
    width: 100%;
    height: 96px;
  }
  
  #main #content-container {
    background: darkgreen;
    color: white;
    width: 100%;
    flex-grow: 1;
    max-height: 100%;
  }
  
  #main #content-container #content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    max-height: 100%;
  }
  
  #main #content-container #content #left {
    background: darkblue;
    width: 30%;
    height: 100%;
  }
  
  #main #content-container #content #right {
    background: darkred;
    height: 100%;
    flex-grow: 1;
    overflow-y: scroll;
  }
  
  #main #content-container #content #right #inner {
    font-size: 25rem;
  }
  </code></pre>