Nesting grids on a fixed size container loses overflow scroll ability in nested child

Question

I'm looking for the right way to embed grid layouts inside other grids so that the child elements can be scrollable.

In the example below, I want the middle part to be scrollable and have fixed sized top and bottom headers. Another constraint is that the top parent needs to be position fixed occupying the full page.

I've produced a simplified version of this problem, by commenting out the sidebar level, it works as intended. Now when I add that intermediate level, the middle part in the sidebar-bottom stops being scrollable, and the bottom header doesn't even appear.

Just to clarify: with the code below as it is, it works. If you uncomment the commented parts, it stops working (that's what I want to make work).

.page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box {
  height: 100%;
  width: 100%;
}

.sidebar {
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr;
}

.sidebar-top {}

.sidebar-bottom {
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr max-content;
}

.middle {
  overflow: auto;
}

<div class="page">
  <div class="box">
    <!--
    <div class="sidebar">
      <div class="sidebar-top">
        <h1>Side Top</h1>
      </div>
-->
    <div class="sidebar-bottom">
      <div class="top">
        <h1>Top</h1>
      </div>
      <div class="middle">
        <h1>Middle</h1>
        <h1>Middle</h1>
        <h1>Middle</h1>
        <h1>Middle</h1>
        <h1>Middle</h1>
        <h1>Middle</h1>
        <h1>Middle</h1>
        <h1>Middle</h1>
      </div>
      <div class="bottom">
        <h1>Bottom</h1>
      </div>
    </div>
  </div>

  <!--  
  </div>
-->
</div>

I leave a codepen below in case you want to try it yourself. Make sure you resize your window so that it doesn't fit.

https://codepen.io/javioverflow/pen/zYEVKEo