title: Flexbox stretch textarea in column
body: <p>I am trying to get this textarea in a 2 column layout to stretch to fill the empty space. So the right column is variable height and I would like the textarea in the left column to stretch to fill the empty space. I have tried using align-items: stretch on the parent as well as setting the height to 100% on the textarea and I can't seem to get it to grow to fill the space.</p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="left"&gt;
          &lt;h1&gt;Stuff&lt;/h1&gt;
          &lt;textarea&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
          &lt;h1&gt;Preview&lt;/h1&gt;
          &lt;div class="content"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here are the styles</p>
  
  <pre><code>.row{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  
  .row &gt; div{
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  textarea{
    height: 100%;
  }
  
  .content{
    height: 500px;
    background-color: green;
  }
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/vMo00gCo8tXQiRdLoYbM" rel="noreferrer">Here is a plunkr</a></p>
  
  <p>I understand the need for vendor prefixes and all that so you don't need to get into that. This is just a simplified version of my code to demonstrate the problem I am having.</p>