title: Flexbox resize and scrollable overflow
body: <p>I have content that I am resizing, and I want to have a fixed heading that doesn't grow/shrink and is not part of the scrollable content. With the content below becoming scrollable if there is not enough space.</p>
  
  <p>The content outer wrapper (<code>flexGrowWrapper</code>) has a <code>flex-grow: 1</code> and the inner wrapper has <code>height: 100%; overflow-y: auto</code>. The thought process here is that <code>flexGrowWrapper</code> will fill up any remaining space within the <code>resize</code> div, the inner wrapper will then take the full height of the <code>flexGrowWrapper</code> and if there is overflow, it should scroll.</p>
  
  <p>What is happening is that <code>flexGrowWrapper</code> does grow to fill the <code>resize</code> area, but it seems that it's content is dictating it's min-height.</p>
  
  <p>How can I make <code>flexGrowWrapper</code> never go beyond the <code>resize</code> area height?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("button").click(function() {
   $(".resize").toggleClass("small");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.resize {
    height: 200px;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    width: 300px;
  }
  
  .resize.small {
    height: 100px;
  }
  
  .heading {
    flex: 0 0 auto;
  }
  
  .flexGrowWrapper {
    border: 2px solid red;
    flex-grow: 1;
  }
  
  .wrapper {
    height: 100%;
    overflow-y: auto;
  }
  
  .content {
    display: flex;
    flex-direction: row;
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;
  Resize
  &lt;/button&gt;
  &lt;div class="resize"&gt;
    &lt;div class="heading"&gt;
    &lt;label&gt;Some heading that wont scroll&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="flexGrowWrapper"&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="content"&gt;
          content
        &lt;/div&gt;
        &lt;div class="content"&gt;
          content
        &lt;/div&gt;
        &lt;div class="content"&gt;
          content
        &lt;/div&gt;
        &lt;div class="content"&gt;
          content
        &lt;/div&gt;
        &lt;div class="content"&gt;
          content
        &lt;/div&gt;
        &lt;div class="content"&gt;
          content
        &lt;/div&gt;
        &lt;div class="content"&gt;
          content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
   Something else here
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note: I looked at the <a href="https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content">this similar question</a>, but it seems to have some differences, and I couldn't get the solutions to work for me.</p>