Make div height adjustable to parent div based on previous div height

Question

There are two divs one below another, here first div will contain title that might have 2 -3 lines. And the requirement is the second div which will contain the description will take remaining height of the parent div. And if the content is large then vertical scroll should be applicable. Scroll should be applicable to second div only.

Here you can find the jsfiddle link: https://jsfiddle.net/6emsjuya/2

Code snippet:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#main-container {
  height: 100%;
  width: 100%;
}

#fixed-height {
  background-color: #ebcaca;
  height: 80px;
}

#remaining-height {
  background-color: #ebe6e6;
  height: calc(100% - 100px);
  overflow-y: auto;
}

<div id="main-container">
  <div id="fixed-height">
    Fixed height
  </div>
  <div id="remaining-height">
    Remaining height 1<br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining
    height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height
    <br>
  </div>
</div>

Here right now the first div has fixed height 80px. which should be dynamic i.e. based on the content first div should take height and second div will take remaining height with scroll if needed.

Answer 1

Well you can use flex box to instane you expect.

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#main-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#fixed-height {
  background-color: #ebcaca;
}

#remaining-height {
  background-color: #ebe6e6;
  overflow-y: auto;
  height: 100%;
}

<div id="main-container">
  <div id="fixed-height">
    Fixed height
  </div>
  <div id="remaining-height">
    Remaining height 1<br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining
    height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height
    <br>
  </div>
</div>