将元素扩展到容器末尾

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 {&nbsp; max-height: 52.5vh;&nbsp; height: 52.5vh;&nbsp; overflow: scroll;&nbsp; background-color: yellow;&nbsp; display:flex;&nbsp; flex-direction:column;&nbsp; &nbsp;&nbsp;}textarea {&nbsp; background-color: lightgray;&nbsp; border: 1px solid grey;&nbsp; outline: none;&nbsp; color: black;&nbsp; letter-spacing: 0;&nbsp; text-transform: none;&nbsp; box-shadow: none;&nbsp; resize: none;&nbsp; padding: 0.7rem;&nbsp; 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">&nbsp; &nbsp;<input type="text" class="form-control" placeholder="Input"/>&nbsp;&nbsp; &nbsp;<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 {&nbsp; max-height: 52.5vh;&nbsp; height: 52.5vh;&nbsp; overflow: scroll;&nbsp; background-color: yellow;}textarea {&nbsp; background-color: lightgray;&nbsp; border: 1px solid grey;&nbsp; outline: none;&nbsp; color: black;&nbsp; letter-spacing: 0;&nbsp; text-transform: none;&nbsp; box-shadow: none;&nbsp; resize: none;&nbsp; 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">&nbsp; &nbsp;<input type="text" class="form-control" placeholder="Input"/>&nbsp;&nbsp; &nbsp;<textarea class="contact__textarea separator--small h-100 w-100 form-control" placeholder="Textarea"></textarea></div>