将元素扩展到容器末尾

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

为下面的 div 添加了 flex-wrap 类，并更正了 bootstrap cdn url。请检查片段。

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