Resize sibling height based on height of other sibling, keeping parent height constant?

Question

This is how my html/css looks like.

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

Now what exactly I want to do is to resize sibling height(question-list-wrapper) based on height of other sibling(question-input-wrapper), keeping parent height constant?

Here height of text-area grows based on content length, and I want height of question-list-wrapper to reduce when height of text-area increases.

I have also attached the snapshot for better understanding.

Related if not duplicate - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings — Paulie_D, Apr 15 '19 at 16:26
Thanks for sharing, related to some extent but still, I am not been to solve the issue :) — Divyanshu Rawat, Apr 15 '19 at 16:37

score 1 · Accepted Answer · answered Apr 17 '19 at 11:18

You parent should be flex, so its children can split its height automaticaly, and you cant really have one of them be absolute, otherwise you would have to calculate heights in 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>

Resize sibling height based on height of other sibling, keeping parent height constant?

1 Answers1