JSFiddle - React, Tailwind, and code Playground

HTML

<div class="abcd">
  <div class="a">A</div>
  <div class="bcd">
    <div class="b">B</div>
    <div class="cd">
      <div class="c" style="height: 150px;">C</div>
      <div class="d">D</div>
    </div>
  </div>
</div>

CSS

.abcd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.a {
  height: 50px;
  background: #777;
}

.bcd {
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  background: #999;
}

.b {
  width: 50px;
  background: #888;
}

.cd {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c {
  background: #477;
}

.d {
  flex: 1;
  background: #475;
  overflow-y: scroll;
}