title: Textarea CSS {height: 100%} in table-cell div (IE)
body: <p><strong>NOTE: This is only an issue in IE.</strong></p>
  
  <p>How can a force the textarea to vertically fill the table-cell div? I have applied <code>height: 100%</code> to all the parent elements, but the textarea still maintains its default height.</p>
  
  <p>Screenshot:
  <img src="https://i.stack.imgur.com/jsN3K.png" alt="Example from my test site"></p>
  
  <p>Example of my problem: <a href="http://jsfiddle.net/py4gs/" rel="noreferrer">JSFiddle</a></p>
  
  <p>Example code:</p>
  
  <p><strong><em>HTML</em></strong></p>
  
  <pre><code>&lt;div class="table"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col col-sm"&gt;
              &lt;div class="thumbnail"&gt;Thumbnail&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col col-lg"&gt;
              &lt;textarea&gt;Text area&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>CSS</em></strong></p>
  
  <pre><code>* {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .table {
      display: table;
      width: 100%;
      height: 100%;
  }
  .row {
      display: table-row;
      height: 100%;
  }
  .col {
      display: table-cell;
      border: 1px dashed #FF0000;
      padding: 5px;
      vertical-align: top;
      height: 100%;
  }
  .col-sm {
      width: 30%;
  }
  .col-lg {
      width: 70%;
  }
  .thumbnail {
      height: 150px;
      width: 200px;
      border: 1px solid #CCC;
  }
  
  textarea {
      width: 100%;
      height: 100%;
  }
  </code></pre>