JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">
    regular child
  </div>
  <div class="child">
    <div class="sub-parent">
      <div class="sub-child">
        this one has a dynamic height
        <br/>
        this one has a dynamic height
      </div>
      <div class="sub-child">
        <div class="content-wrapper">
          <div class="content">
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
            this one should fill the remaining height and be scrollable
          </div>
        </div>
      </div>
    </div>
 ...

CSS

.parent {
  display: table;
  height: calc(100vh - 200px);
  background-color: white;
  border: 1px solid #eee;
}

.child {
  display: table-cell;
  height: 100%;
}

.child:nth-child(1) {
  background-color: blue;
  color: #fff;
}

.child:nth-child(2) {
  background-color: yellow;
}

.sub-parent {
  display: block;
  background-color: pink;
  height: 100%;
  display:table;
}

.sub-child {
  width: 100%;
  display:table-row;
}

.sub-child:nth-child(1) {
  background-color: red;
  color: #fff;
}

.sub-child:nth-child(2) {
  background-color: orange;
  height:100%;
}

.content-wrapper {
  width:100%;
  height:100%;
  position:relative;
}

.content {
  overflow-y:auto;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}