JSFiddle - React, Tailwind, and code Playground

HTML

<div id='site'>
<div id='pane'>
  <div id='editor'>
    <div id='content'></div>
  </div>
</div>
</div>

CSS

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#site {
  width: 100%;
  height: 100%;
  background-color: #000;
  
  display: grid;

  /* grid-template-rows: 10em 1fr 10em; */
  grid-template-rows: 10em minmax(0, 1fr) 10em; /* new */

  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
  'top top top'
  'lpn mid rpn'
  'bot bot bot';
}

#pane {
  grid-area: mid;
  height: 100%;
  width: 100%;
  background-color: #f0f;
  overflow: auto; /* new */
}

#editor {
  /* display: relative; */
  /* overflow: scroll; */
}

#content {
   height: 2000px;
}