CSS grid item cell expands instead of overflowing - html

Question

I have a css grid:
|-------|-------------------|
|-------| |
| | overflow |
|-------|-------------------|
|-------|-------------------|
And I cannot stop the "overflow" from growing, basically it always expands, despite having set:
overflow: auto;
in the css. How can achieve this?
The snippet below.
html {
font-size: 22px;
}
body {
padding: 1rem;
/* grid-template-columns: 1fr 3fr; */
}
.wrapper {
max-height: 70vh;
padding: 1rem;
}
.header {
background-color: red;
color: white;
padding: 1rem;
height: 2rem;
resize: horizontal;
grid-area: 1 / 1 / 2 / 2;
}
.nav {
background-color: lightgrey;
color: baclk;
padding: 1rem;
height: 4rem;
overflow: auto;
min-width: 12rem;
resize: horizontal;
grid-area: 2 / 1 / 3 / 2;
}
.scroll {
background-color: dodgerblue;
color: white;
padding: 1rem;
overflow: auto;
grid-area: 1 / 2 / 3 / 3;
}
.prev {
background-color: black;
color: white;
padding: 1rem;
height: 4rem;
grid: 3 / 1 / 4 / 2;
}
.select {
background-color: lightgrey;
color: white;
padding: 1rem;
height: 4rem;
grid-area: 4 2 4 4;
}
.cards {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 0.5rem;
}
/* Screen larger than 600px? 2 column */
#media (min-width: 600px) {
.cards {
grid-template-columns: 1fr 3fr;
}
}
<div class="wrapper">
<div class="cards">
<div class="header">HEADER</div>
<div class="scroll">
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
<!-- <p>666</p>
<p>777</p>
<p>888</p>
<p>999</p> -->
</div>
<div class="nav">NAV</div>
<div class="prev">PREVIEW</div>
<div class="select">SELECT</div>
</div>
</div>

Answer 1

It turned out the solution is to add one line to the grid definition:
grid-template-rows: auto 1fr auto;
This produces a nice layout, when the "scroll" area overflows, while the grid scales as expected. Updated snippet below.
html {
font-size: 22px;
}
body {
padding: 1rem;
overflow: hidden;
/* grid-template-columns: 1fr 3fr; */
}
.header {
background-color: red;
color: white;
padding: 1rem;
height: 2rem;
grid-area: 1 / 1 / 2 / 2;
}
.nav {
background-color: lightgrey;
color: baclk;
padding: 1rem;
height: auto;
overflow: auto;
min-width: 12rem;
resize: horizontal;
grid-area: 2 / 1 / 3 / 2;
}
.scroll {
background-color: dodgerblue;
color: white;
padding: 1rem;
overflow: auto;
max-height: 70vh;
grid-area: 1 / 2 / 3 / 3;
}
.prev {
background-color: black;
color: white;
padding: 1rem;
max-height: 30vh;
grid: 3 / 1 / 4 / 2;
}
.select {
background-color: lightgrey;
color: white;
padding: 1rem;
height: 4rem;
grid-area: 4 2 4 4;
}
.cards {
max-width: 80vw;
height: 90vh;
margin: 0 auto;
display: grid;
grid-gap: 0.5rem;
}
/* Screen larger than 600px? 2 column */
#media (min-width: 600px) {
.cards {
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
}
}
<div class="wrapper">
<div class="cards">
<div class="header">HEADER</div>
<div class="scroll">
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
<p>666</p>
<p>777</p>
<!-- <p>888</p>
<p>999</p> -->
</div>
<div class="nav">NAV</div>
<div class="prev">PREVIEW</div>
<div class="select">SELECT</div>
</div>
</div>