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

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

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.

Well you can use flex box to instane you expect.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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%;
}

<!-- language: lang-html -->

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

<!-- end snippet -->