html - Textarea 不填充父 div 的高度

Question

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

我将右侧 DIV 涂成黑色，并在“flex”的帮助下，它的大小与左侧 DIV 的大小相同。但是将 height=100% !imrotant; 设置为 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;
}