Измените высоту родного брата на основе высоты другого родного брата, оставив родительскую высоту постоянной?

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>

Теперь, что именно я хочу сделать, это изменить размер высоты брата (вопрос-список-оболочку) в зависимости от высоты другого брата (вопрос-вход-упаковщик), сохранить родителя константа высоты?

Здесь высота текстовой области увеличивается в зависимости от длины содержимого, и я хочу, чтобы высота вопрос-списка-оболочки уменьшалась при увеличении высоты текстовой области.

Я также приложил снимок для лучшего понимания.

Answer 1

Ваш родитель должен быть гибким, чтобы его потомки могли автоматически разделить его высоту, и вы не можете сделать, чтобы один из них был абсолютным, иначе вам придется вычислять высоту в 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>