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

Question

I'm have a container which is of height:

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

Inside of this container, as the last child, I have a textarea . This element is supposed to fill the remaining height - how can I do so?

<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

Here you go:

As you keep adding the data it will keep appending it until it reaches height:50vh; then a scroll will be seen.

View it in full screen for the height variations.

 .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>