CODEWITHSUNDEEP
csshtmlflexbox
Divyanshu Rawat
Divyanshu Rawat

Reputation: 4721

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

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.

enter image description here

Upvotes: 0

Views: 730

Answers (1)

Luk&#225;š Gibo Vaic
Luk&#225;š Gibo Vaic

Reputation: 4420

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>

Upvotes: 1

Related Questions