填充最小高度的剩余高度，最大父高度

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

您在这里：

随着您不断添加数据，它将一直追加数据直到它到达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>

Answer 2

您在这里：

随着您不断添加数据，它将一直追加数据直到它到达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>