フレックス：ChromeでTextareaの高さが機能しましたが、Safariでは機能しません

Question

テキストの高さをページの最下部に合わせようとしています。

下記のコードはChromeで動作しますが、Safariでは動作しません。ベンダープレフィックスを追加しようとしましたが、変更はありませんでした。

また、私はブートストラップを使用しています。

HTML

<div class="container"> 
    <div class="row twenty-percent"> 
    <div id="address" class="col-xs-9 col-xs-offset-3"> 
     <div class="row row1"> 
     <div class="col-xs-6"> 
      <label class="sr-only" for="exampleInputName2" required>Name</label> 
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Name"> 
     </div> 
     <div class="col-xs-6"> 
      <label class="sr-only" for="exampleInputEmail3" required>Email address</label> 
      <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> 
     </div> 
     </div> 
     <div class="row row2"> 
     <div class="textareaWrapper col-xs-12"> 
      <textarea placeholder="Your enquiry" id="message" class="form-control" required></textarea> 
     </div> 
     </div> 
     <div id="submit"> 
     disqus 
     <button type="button" class="btn btn-primary">Submit</button> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

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; 
} 

http://codepen.io/wheelhot/pen/ZLByQY?editors=1100

Answer 1

textAreaWrapperからheight: 100%を削除します。まだ両方で動作します。