Max height of 1fr grid child

Question

I've got a problem that took me the whole day and I can't figure it out. It looks so simple and I'm sure that I've done things like that before, but now it drives me crazy.

I've got grid container with 3 columns. Grid container has width and height equal to 100vw and 100vh. The third column is also a grid container with grid-template-rows: auto 1fr. The 1fr element is a list with many children. The whole body shouldn't stretch and the if the list reaches its maximum height should have scrollbar.

The problem is that it simply won't do it, no matter what methods I'll use. I can't use px, it should be fully responsive.

I've made StackBlitz version. The problem is with the green element. Could you give me a hand with this?

body, html {
  padding: 0;
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: blue;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-container {
  background-color: red;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
}

.list {
  background-color: green;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.element {
  font-size: 40px;
}

<div class="container">
  <div>a</div>
  <div>b</div>
  <div class="grid-container">
    <div>
      <h1>A</h1>
    </div>
    <div class="list">
      <div class="element">A</div> <!-- 50x -->
    </div>
  </div>
</div>