JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo">Logo</div>
<nav id="nav1">Navigation 1</nav>
<nav id="nav2">
Navigation<br>
Teil<br>
2</nav>
<main>
<p>Hauptseite<br>
die soll<br>
als einzige<br>
scrollbar sein<br>
und nicht<br>
hinter dem anderen<br>
verschwinden, sondern<br>
nur auf dieses Feld begrenzt sein</p>
<p>ich weiß, daß es gerade mit tabelle ist,<br>
es soll ja nur zwigen, wie die Seite<br>
aufgebaut sein soll</p>
<p>Einmal hin, einmal her<br>
rundherum, Grid ist nicht schwer</p>
<p>Einmal hin, einmal her<br>
rundherum, Grid ist nicht schwer</p>
<p>Einmal hin, einmal her<br>
rundherum, Grid ist nicht schwer</p>
<p>Einmal hin, einmal her<br>
rundherum, Grid ist nicht schwer</p>
<p>Einmal hin, einmal her<br>
rundherum, Grid ist nicht schwer</p>
<p>Einmal hin, einmal her<br>
rundherum, Grid ist nicht schwer</p>
<p>Einmal hin, einmal her<br>
rundherum, Grid ist nicht schwer</p>
<p>mit html und frames kein ding, mit CSS<br>
sehe ich da einfach bisher KEINE Option<br>
die mir das ermöglicht.</p></main>

CSS

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid: "logo nav1" auto
        "nav2 main" 1fr
        / 10em 1fr;
}
#logo {
  grid-area: logo;
  background-color: #fcc;
  padding: 2em;
}
#nav1 {
  grid-area: nav1;
  background-color: #cfc;
  padding: 2em;
}
#nav2 {
  grid-area: nav2;
  background-color: #ccf;
  padding: 0.5em;
}
main {
  grid-area: main;
  background-color: #fcf;
  padding: 0 0.5em;
  overflow-y: scroll;
}
main p {
  margin: 0.5em 0;
}