Flex：Textarea 高度在 Chrome 中有效，但在 Safari 中无效

Question

所以我试图让我的文本区域高度达到页面底部。

问题是，下面的代码在 Chrome 中有效，但不适用于 Safari。我尝试添加供应商前缀但没有任何变化。

我也在使用 Bootstrap。

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%。仍然适用于两者。

Flex：Textarea 高度在 Chrome 中有效，但在 Safari 中无效

Flex: Textarea height worked in Chrome but not Safari

html

css

webkit

textarea

flexbox