title: Flexbox not expanding with content
body: <p>I am trying to build a basic messenger view on a mobile screen. So there is a header at the top, a scrollable list of messages in the middle, and a bar at the bottom with a textarea and button to send a new message.</p>
  
  <p>I am using an autosize plugin to makes the textarea expand as a user types their message. The problem is that as it changes the height property, it will start to overflow the height of the container that it is in, instead of that container expanding to take up more room.</p>
  
  <p>A working sample is here: <a href="https://codepen.io/jwynveen/pen/RJdWLB?editors=1100#0" rel="nofollow noreferrer">https://codepen.io/jwynveen/pen/RJdWLB?editors=1100#0</a></p>
  
  <p><a href="https://i.stack.imgur.com/lcAhA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lcAhA.png" alt="enter image description here"></a></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-css lang-css prettyprint-override"><code>#container {
    width: 412px;
    height: 660px;
    border: solid 2px black;
    display: flex;
    flex-direction: column;
  }
  #container h1 {
    border-bottom: solid 1px gray;
    margin-bottom: 0;
    padding: 1rem;
  }
  #container #message-list {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: scroll;
  }
  #container #message-list .message {
    margin: 1rem;
    padding: 1rem;
    border: solid 1px gray;
  }
  #container #message-input-bar {
    display: block;
  }
  #container #message-input {
    padding: 1rem;
    display: flex;
    border-top: solid 2px red;
  }
  #container #message-input textarea {
    flex-grow: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;div id="container"&gt;
    &lt;h1&gt;My Header&lt;/h1&gt;
    &lt;div id="message-list"&gt;
      &lt;div class="message"&gt;This is a dummy message.&lt;/div&gt;
      &lt;div class="message"&gt;This is a dummy message.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="message-input"&gt;
      &lt;textarea style="height: 100px"&gt;&lt;/textarea&gt;
      &lt;button id="send"&gt;Send&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If there are no messages in the center area, the textarea makes its container expand as expected. But once the center area has enough to scroll, the textarea starts to overflow.</p>