填充 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>