Prevent grid area from expanding causing whole page to scroll

Not 100% sure if this is what you're asking. I added a wrapper to content to make it scrollable, and set a vh height on it, which you could adjust.

#content-scroll {
   height: 40vh;
   overflow: scroll;
}
#content {
   height: 2000px;
}

<div id='site'>
<div id='pane'>
  <div id='editor'>
  <div id='content-scroll'>
    <div id='content'>

    </div>
    </div>
  </div>
</div>
</div>

https://jsfiddle.net/16owL8x0/

min-width: auto / min-height: auto

Generally speaking, a grid item cannot be smaller than its content. The default minimum size of grid items is min-width: auto and min-height: auto.

This often causes grid items to overflow their grid areas or grid containers. It also prevents scrollbars from rendering on the items, since an overflow condition can't be triggered (the grid item just keeps expanding).

To override this default (and allow grid items to shrink past their content size) you can use min-width: 0, min-height: 0 or overflow with any value other than visible.

This behavior, with references to official documentation, is explained in this post:

• Prevent content from expanding grid items

1fr

Another thing to note is that 1fr means minmax(auto, 1fr). This means, again, that the track to which it is applied cannot shrink below the content size (i.e., the min value in the minmax() function is auto, meaning content-based).

Therefore, to override this setting, use minmax(0, 1fr) instead of 1fr.

More details here: https://github.com/w3c/csswg-drafts/issues/1777

revised demo (tested in Chrome, Firefox and Edge)

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;
}

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

jsFiddle demo