css - 制作一个 <textarea> 填充剩余高度

Question

我从this question中学到了如何使 HTML 元素填充容器的剩余高度。但它似乎不适用于 <textarea> . This Fiddle 比较了 display: table-row 的效果在 <textarea> 上和一个 <div> :

http://jsfiddle.net/b4Tt8/2/

为什么不同，我怎样才能在 textarea 上获得适当的效果？

Answer 1

您可以使用 flexbox 根据其父级设置文本区域的高度。

HTML

<div class="container">
  <div class="btn-wrapper">
    <button>X</button>
  </div>
  <textarea></textarea>
</div>

CSS

.container {
  height: 220px;
  width: 220px;
  background-color: pink;
  display: flex;
  flex-direction: column; 
 } 

.container textarea {
  box-sizing: border-box; /* fit parent width */
  height: 100%;
}

jsFiddle