title: Prevent "flex-grow: 1" item from growing if it's content is bigger
body: <p>I am working on a layout that consists markup and styling below (live demo <a href="https://codepen.io/IljaDaderko/pen/MWwLgVr" rel="nofollow noreferrer">https://codepen.io/IljaDaderko/pen/MWwLgVr</a>) It all works well I have my header and footer with fixed heights and content area auto expanding to fill rest of the space.</p>
  
  <p>Inside content area I have a div that fills up all it's parent space and adds <code>overflow-x: scroll</code>. My initial assumption was that if I add a bunch of <code>Content &lt;br /&gt;</code> inside of it I would still see my footer and be able to scroll down, however it keeps expanding content area (see live demo #2 <a href="https://codepen.io/IljaDaderko/pen/MWwLgBQ" rel="nofollow noreferrer">https://codepen.io/IljaDaderko/pen/MWwLgBQ</a>).</p>
  
  <p>Is it possible to keep that footer at the bottom (without making it fixed), while making content area auto expand and utalising scroll container? Reason to keep scroll container is that it will be reusable component in a framework I use.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
    width: 100vw;
    height: 100vh;
    background: pink;
    display: flex;
    flex-direction: column;
  }
  
  .header {
    background: magenta;
    height: 50px;
  }
  
  .content {
    flex-grow: 1;
  }
  
  .footer {
    background: lightgreen;
    height: 30px;
  }
  
  .scroll {
    height: 100%;
    width: 100%;
    overflow-x: scroll;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;Header&lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;div class="scroll"&gt;
        Content
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;Footer&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>