JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div>
    header banner
  </div>
  <div class="section">
    <div class="left">
      should always fill remaining height (Works)
    </div>
    <div class="content">
      main content: fills remaining space then overflows with scrollbar (doesnt work)<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
      x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>

    </div>
    <div class="right">
      should always fill remaining height (Works)
    </div>
  </div>

</body>

CSS

html{
  height:100%;
}

body {
  margin:0px;
  display: flex;
  flex-direction: column;
}

.section {
  display: flex;
}

.content {
  background: gold;
  overflow: scroll;
  flex:1;
}

.left {
  background: tomato;
}

.right {
  background: lightgreen;
}