Развернуть элемент до конца контейнера

Question

У меня есть вход и текстовая область внутри контейнера, которая имеет height: 52.5vh. Я хочу, чтобы текстовая область начиналась прямо под входом и расширялась до конца контейнера. Как я могу это сделать?

Кстати, оба элемента должны занимать всю ширину.

.contact__user-input {
  max-height: 52.5vh;
  height: 52.5vh;
  overflow: scroll;
  background-color: yellow;
}

textarea {
  background-color: lightgray;
  border: 1px solid grey;
  outline: none;
  color: black;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  resize: none;
  padding: 0.7rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="contact__user-input d-flex">
   <input type="text" class="form-control" placeholder="Input"/> 
   <textarea class="contact__textarea separator--small h-100 w-100" placeholder="Textarea"></textarea>
</div>

Answer 1

Вы можете использовать flex для родителя и сделать его column мудрым.

.contact__user-input {
  max-height: 52.5vh;
  height: 52.5vh;
  overflow: scroll;
  background-color: yellow;
  display:flex;
  flex-direction:column;    
}

textarea {
  background-color: lightgray;
  border: 1px solid grey;
  outline: none;
  color: black;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  resize: none;
  padding: 0.7rem;
  height:auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="contact__user-input d-flex">
   <input type="text" class="form-control" placeholder="Input"/> 
   <textarea class="contact__textarea separator--small h-100 w-100" placeholder="Textarea"></textarea>
</div>

Answer 2

Добавлен класс flex-wrap для указанного ниже div, а также исправлен URL-адрес bootstrap cdn. пожалуйста, проверьте фрагмент.

<div class="contact__user-input d-flex flex-wrap">

.contact__user-input {
  max-height: 52.5vh;
  height: 52.5vh;
  overflow: scroll;
  background-color: yellow;
}

textarea {
  background-color: lightgray;
  border: 1px solid grey;
  outline: none;
  color: black;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  resize: none;
  padding: 0.7rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />

<div class="contact__user-input d-flex flex-wrap">
   <input type="text" class="form-control" placeholder="Input"/> 
   <textarea class="contact__textarea separator--small h-100 w-100 form-control" placeholder="Textarea"></textarea>
</div>