JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-html-simulator">
  <div class="c">

    <div class="a">
      
      <!-- fake menu -->
      <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
      </ul>
      
    </div>

    <div class="b">
      <div class="d">
        
        <!-- fake content -->
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8
        <br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16
        
      </div>
    </div>

  </div>
</div>

CSS

/* in the real application this out-html-simulator could a a div with any width or height */
div.outer-html-simulator {
  position: relative;
  width: 400px;
  height: 300px;
}

div.a,
div.b,
div.c {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

div.a {
  /* remember I don't know what the height of Div A will be because content is added and removed at runtime */
  height: auto;
}

div.b {
  height: 100%; /* I don't know what to do here */
  overflow-y: scroll;
}

div.c {
  height: 100%;
  overflow: hidden;
}


/* just colours for styling */
div.a { background-color: green; }
div.b { background-color: red; }
div.c { background-color: yellow; border: 1px solid cyan; }