根据其他同胞的高度调整同胞高度的大小，同时保持父级的高度不变？

Question

这是我的html / css的样子。

.question-list-wrapper {
  height: calc(98vh - 35rem);
  overflow: auto;
  padding: 15px;
}

.question-input-wrapper {
  margin-top: 10px;
  display: inline-flex;
  width: 100%;
  position: absolute;
  bottom: 20px;
}

<div>
  <div class="question-list-wrapper">
    // consist of list of Questions.
  </div>
  <div class="question-input-wrapper">
    // consist of input to post a Question.
    <textarea placeholder="Write Question..." (keyup)="autoGrow()"></textarea>
  </div>
</div>

现在我真正想做的是根据其他兄弟姐妹（question-input-wrapper）的高度调整兄弟姐妹的高度（question-list-wrapper） 保持父母身高恒定？

此处的文本区域的高度根据内容的长度而增加，我希望当文本区域的高度增加时，问题列表包装器的高度减小。

我还附上了快照，以便于更好地理解。

Answer 1

您的父级应该是flex，所以它的子级可以自动拆分其高度，并且您不能真正让其中一个是绝对的，否则您将不得不在js中计算高度。

.parent {
  height: 108px;
  display: flex;
  flex-flow: column;
}

.question-list-wrapper {
  overflow: auto;
  padding: 15px;
}

.question-input-wrapper {
  margin-top: 10px;
  width: 100%;
}

textarea {
  display: block;
}

<div class="parent">
  <div class="question-list-wrapper">
    // consist of list of Questions.
  </div>
  <div class="question-input-wrapper">
    // consist of input to post a Question.
    <textarea placeholder="Write Question..."></textarea>
  </div>
</div>