Adding a scrollbar in a deeply nested flex container

Question

I have a modal that has a max-height: 90vh; set and a few levels down, I have a flex container that has a header and then a container with variable amount of items in it. I want the item container to be scrollable if it makes the modal's height greater than 90vh. How do I do that?

I have reproduced this issue in as simple a test case as possible:

<div class="page-wrapper">
  <div class="page">
    <div class="container">
      <div class="header">Header</div>
      <div class="scrollable-container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
        <div>Item 7</div>
        <div>Item 8</div>
        <div>Item 9</div>
        <div>Item 10</div>
        <div>Item 11</div>
        <div>Item 12</div>
        <div>Item 13</div>
        <div>Item 14</div>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.page-wrapper {
  background-color: black;
  padding: 16px;
  max-height: 70vh;
  height: 100%;
  width: 300px;
  display: flex;
  flex-direction: column;
}

.page {
  flex-grow: 1;
  background-color: red;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.container {
  flex-grow: 1;
  height: 100%;
  background-color: orange;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.header { }

.scrollable-container {
  height: 100%;
  background-color: yellow;
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

If I remove the top-level .page-wrapper element and add max-height: 70vh; to the .page element. Then the scrollbar works as I want it to.

Here's a link to a codepen for this https://codepen.io/Simonas-Naulickas/pen/LYXvxjY