Div growing instead of overflow being applied

Question

How can I prevent main-content-inner from growing to fit the content within it, and instead have an overflow enabled, so the size remains the same but becomes scrollable?

To be clear, the red border is just illustrating the boundary of the application - I do not expect this to change size, nor the boxes within it. When the content of the bottom-right box (main-content-inner) exceeds it's current size, I want everything to stay the same size but that div to become scrollable, e.g.

(Note that I've hardcoded the pixel width and height on the main-content-inner div for the sake of this screenshot.)

Codepen replicating the issue.

#root {
    width: 50dvw;
    height: 50dvh;
    border: 1px solid red;
}

.app {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 34px auto;
    grid-template-columns: auto;
    grid-template-areas:
        "title-bar"
        "app-layout";
}
.title-bar {
    grid-area: title-bar;
    width: 100%;
    height: 100%;
    background-color: lightgray;
}
.app-layout {
    grid-area: app-layout;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 240px auto;
    grid-template-areas:
        "side-bar main-content main-content";
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
.side-bar {
    grid-area: side-bar;
    width: 100%;
    height: 100%;
    background-color: lightgray;
}
.main-content {
    grid-area: main-content;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.main-content-inner {
    height: 100%;
    width: 100%;
    overflow: scroll;
    background-color: lightgray;
}

<div id="root">
  <div class="app">
    <div class="title-bar"></div>
    <div class="app-layout">
      <div class="side-bar"></div>
      <div class="main-content">
        <div class="main-content-inner">Lorem ipsum<br><br>dolor sit amet, consectetur adipiscing elit.<br><br> Vivamus imperdiet ex<br><br> tempus nulla lobortis tristique <br><br>id eu purus. Integer<br><br> nec malesuada odio,<br><br> in scelerisque magna.<br><br> Praesent pellentesque justo risus<br><br>, non tempus<br><br> arcu dignissim malesuada.<br><br> Ut dictum blandit quam<br><br> sit amet varius<br><br>. In ut dui massa.</div></div>
      </div>
    </div>
  </div>
</div>