title: Flex: Textarea height worked in Chrome but not Safari
body: <p>So I'm trying to get my textarea height to reach the bottom of the page.</p>
  
  <p>Problem is, the code below worked in Chrome but doesn't for Safari. I tried adding vendor-prefixes but no change.</p>
  
  <p>Also I'm using Bootstrap.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row twenty-percent"&gt;
      &lt;div id="address" class="col-xs-9 col-xs-offset-3"&gt;
        &lt;div class="row row1"&gt;
          &lt;div class="col-xs-6"&gt;
            &lt;label class="sr-only" for="exampleInputName2" required&gt;Name&lt;/label&gt;
            &lt;input type="text" class="form-control" id="exampleInputName2" placeholder="Name"&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
            &lt;label class="sr-only" for="exampleInputEmail3" required&gt;Email address&lt;/label&gt;
            &lt;input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row row2"&gt;
          &lt;div class="textareaWrapper col-xs-12"&gt;
            &lt;textarea placeholder="Your enquiry" id="message" class="form-control" required&gt;&lt;/textarea&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="submit"&gt;
          disqus
          &lt;button type="button" class="btn btn-primary"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
    height: 100%;
  }
  
  .container,
  .twenty-percent,
  #address {
    height: 100%;
  }
  
  #address {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  
  .row1 {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
  }
  
  .row2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
  }
  
  .textareaWrapper {
    height: 100%;
    display: -webkit-flex;
    display: flex;
  }
  
  textarea {
    height: 100%;
  /* resize is optional */
    resize: none;
  }
  
  #submit {
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/wheelhot/pen/ZLByQY?editors=1100" rel="nofollow noreferrer">http://codepen.io/wheelhot/pen/ZLByQY?editors=1100</a></p>