Css 做一个<；textarea>；填充剩余高度

我学习了如何使HTML元素填充容器的剩余高度。但它似乎不适用于

。此小提琴比较

显示：表格行
对
和
的效果：


为什么会有这种差异，以及如何在文本区域上获得适当的效果？
如果您将
按钮设置为固定高度，则可以使用定位并执行以下操作：

HTML：（已删除br标记）

为什么要使用
显示：表格行声明？没有这个必要。删除
显示：表格行声明，添加一个
框大小：边框框声明到您的textarea选择器，您已全部设置好：

.container
{
    height: 220px;
    width: 220px;
    background-color: pink; 
}

.container > textarea
{
    width: 100%;
    height: 100%;
    background-color: cyan;
    box-sizing: border-box;
}

.container > div
{
    width: 100%;
    height: 100%;
    background-color: cyan;
}


编辑：

上面的CSS使文本区域溢出其父div

以下是最新的答案：

HTML
CSS 3（使用calc函数）
以下是显示两种解决方案的小提琴：


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

HTML

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

您的小提琴中的文本区域太大，至少在我的浏览器上是这样。将其背景设置为“透明”以查看此内容。我忘了你可以设置多个位置值。我可能会这么说，但我仍然很好奇为什么文本区域的表行失败。事实上，没关系-你的提琴在Firefox上不起作用。文本区域仍然太小。我开始觉得Firefox在文本区域上有一些奇怪的问题。@JackM我用display:table row更新了我的帖子，就像你以前尝试的那样。检查高度：200px；请再说一遍。如果不需要IE9支持，最简单的解决方案是：-）
.container
{
    height: 220px;
    width: 220px;
    background-color: pink; 
}

.container > textarea
{
    width: 100%;
    height: 100%;
    background-color: cyan;
    box-sizing: border-box;
}

.container > div
{
    width: 100%;
    height: 100%;
    background-color: cyan;
}

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

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
    position: absolute;
}
.container textarea {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 0, 0.5);
    box-sizing: border-box;
}
.container > div {
    background-color: cyan;
}
.container .button-wrapper {
    background-color: yellow;
    height: 26px;
}
.container .textarea-wrapper {
    background-color: green;
    position: absolute;
    top: 26px;
    width: 100%;
    bottom: 0;
}

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
}
.container textarea {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 0, 0.5);
    box-sizing: border-box;
}
.container > div {
    background-color: cyan;
}
.container .button-wrapper {
    background-color: yellow;
    height: 26px;
}
.container .textarea-wrapper {
    background-color: green;
    height: calc(100% - 26px);
}

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

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

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