当父级具有最大高度和溢出滚动时，Textarea 不会拉伸

Question

我希望文本区域的高度可以拉伸。但是固定的(max-)height 阻止了这一点。
我以为overflow-y: scroll; 会解决这个问题，但正如您在 sn-p 中看到的那样，它没有。

为什么 textarea 不拉伸，为什么按钮不往下移到边框后面？

div {
 display: flex;
 flex-direction: column;
 width: 400px;
 max-height: 70px;
 overflow-y: scroll;
 border: 1px solid red;
}

<div>
  <textarea></textarea>
  <button>Save</button>
</div>

Answer 1

这是因为display: flex。您可以简单地将文本区域包装在元素内：

.a {
 display: flex;
 flex-direction: column;
 width: 400px;
 max-height: 70px;
 overflow-y: scroll;
 border: 1px solid red;
}


textarea{
  width:100%;
  box-sizing: border-box; /* for 100% width https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present */
}

<div class="a">
  <div class><textarea></textarea></div>
  <button>Save</button>
</div>