Quero rolagem separada em cada uma das minhas colunas no meu layout de grade.

Atualmente, estou desenvolvendo um aplicativo Web somente móvel. Quero usar um layout de grade diferente para as orientações de retrato e paisagem.

A orientação de retrato é apenas uma coluna e cada elemento é um após o outro. Não tem problema aqui.

Na orientação paisagem, quero usar 2 colunas. Todo o meu conteúdo é exibido no lado esquerdo e minha navegação se move para o lado direito. Agora, quero que as duas partes tenham um pergaminho separado. Existe uma maneira de implementar isso? E a rolagem deve parar se o conteúdo da coluna atual terminar.

Código no CodePen:https://codepen.io/SuddenlyRust/pen/rmJOqV

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}

h1 {
  min-height: 200px;
}

<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

Muito obrigado pelo seu tempo!