CSS grid item cell expands instead of overflowing

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>