填充 min-height, max-height parent 的剩余高度

Question

我有一个高度的容器：

.contact__user-input {
  max-height: 50vh;
  min-height: 50vh;
  overflow: scroll;
}

在这个容器内，作为最后一个孩子，我有一个textarea 。 这个元素应该填充剩余的高度 - 我该怎么做？

<div class="contact__user-input">
   ...
   <textarea class="contact__textarea separator--small mt-4 w-100" placeholder="Sonstige Leistungen oder eine Nachricht an uns (optional)"></textarea>
</div>

Answer 1

这里是 go：

当您继续添加数据时，它会继续添加数据，直到达到height:50vh; 然后会看到一个卷轴。

全屏查看高度变化。

 .contact__user-input { overflow: scroll; min-height: 50vh; max-height: 50vh; display: flex; }

 <div class="contact__user-input">... <textarea class="contact__textarea separator--small mt-4 w-100" placeholder="Sonstige Leistungen oder eine Nachricht an uns (optional)"></textarea> </div>