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

Question

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

为什么 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  */
}

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

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

Textarea doesn't stretch when parent has max-height and overflow scroll

html

css

textarea

overflow