html - Textarea 不填充父 div 的高度

Question

我正在尝试制作两列(一列包含照片和选择，另一列包含文本区域)。我需要我的文本区域与带有照片、按钮和选择的列的高度相同。

我将右边的 DIV 涂成黑色，在“flex”的帮助下，它的大小与左边的相同。但是将 height=100% !improtant; 设置为 textarea 没有帮助。

此外，设置 height=500px !important 效果很好，将其设置为 500px，因此大小确实发生了变化。但是 100% 没有给我正确的结果。

.modalimg {
  width:100%;
  max-height:100px;
  margin-bottom:5px;
}

.modalimg + button {
  margin-bottom:5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="form-group row-eq-height">
  <div class="col-sm-2 col-sm-offset-1">
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded">
    <button class="btn col-sm-12 btn-primary">Upload</button>
    <select class="form-control">
      <option>One</option>
      <!--set of options-->
    </select>
  </div>
  <div class="col-sm-9 " style="background: #000000;">
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height"></textarea>
  </div>
</div>       

Answer 1

您已应用“display:flex;”到错误的元素。只需将 flex 添加到 textarea 容器，即

.col-sm-9, .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}