How to force CSS grid to be specific height - css

Question

I have found this question: How to set max height to a CSS grid, which talks about setting a specific height to the elements of a grid. I want to set a height to the grid itself, though, and have any elements overflowing to have a scroll bar (refer to the figure below).
Even though I set a max-height to the container element, the large text (.top) still overflows and makes the container element's height larger than its max-height. And since I don't know the size of the .bottom element (its height is auto), I can't set a max-height to the .top element.
.container {
padding: 5px;
width: 200px;
max-height: 200px;
grid-template: 1fr auto / 1fr;
grid-template-areas: "top" "bottom";
background: red;
}
.top {
background: blue;
grid-area: top;
}
.bottom {
background: green;
grid-area: bottom;
}
<div class="container">
<div class="top">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque blandit ipsum vitae vehicula. Vestibulum id urna ac odio scelerisque venenatis. Mauris blandit vitae tortor ac auctor. Donec pharetra accumsan eleifend. Fusce porta ante at turpis venenatis, sed luctus mi efficitur. Nunc eget metus pellentesque ante lacinia facilisis. Aenean magna nisi, feugiat at ullamcorper a, tincidunt id augue. Curabitur ut nisl eu risus convallis luctus et vitae enim. Ut vitae purus sed enim tempus convallis. Vestibulum consequat scelerisque ornare.</p>
<p>Sed at urna turpis. Aenean vehicula, nunc elementum vehicula rutrum, sem orci ornare mauris, auctor ultricies quam enim quis sem. Praesent accumsan volutpat mollis. Proin tempus rhoncus lacus. Cras gravida, mauris sed suscipit vulputate, odio elit sagittis urna, non suscipit odio sapien eget ex. Ut vulputate ante sit amet diam tempus, eget tempus dolor sodales. Etiam quis orci posuere, interdum diam quis, tincidunt urna. Vivamus lectus lectus, hendrerit in sapien quis, tempor sollicitudin sem. Proin quis sem lectus. Fusce quis molestie enim, quis dapibus lacus. Nulla fringilla metus a odio lacinia feugiat. Vivamus rutrum diam placerat tristique scelerisque. Integer a iaculis justo, a tempus lorem.</p>
</div>
<div class="bottom">
<p>Little Text</p>
</div>
</div>
So how can a specific-height grid still be achieved and have any elements that are too large have a scrollbar?

Answer 1

You forgot to set display: grid on the container, and overflow: auto on the top:
.container {
padding: 5px;
width: 200px;
max-height: 200px;
grid-template: 1fr auto / 1fr;
grid-template-areas: "top" "bottom";
background: red;
display: grid; /* added */
}
.top {
background: blue;
grid-area: top;
overflow: auto; /* added */
}
.bottom {
background: green;
grid-area: bottom;
}
<div class="container">
<div class="top">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque blandit ipsum vitae vehicula. Vestibulum id urna ac odio scelerisque venenatis. Mauris blandit vitae tortor ac auctor. Donec pharetra accumsan eleifend. Fusce porta ante at turpis venenatis, sed luctus mi efficitur. Nunc eget metus pellentesque ante lacinia facilisis. Aenean magna nisi, feugiat at ullamcorper a, tincidunt id augue. Curabitur ut nisl eu risus convallis luctus et vitae enim. Ut vitae purus sed enim tempus convallis. Vestibulum consequat scelerisque ornare.</p>
<p>Sed at urna turpis. Aenean vehicula, nunc elementum vehicula rutrum, sem orci ornare mauris, auctor ultricies quam enim quis sem. Praesent accumsan volutpat mollis. Proin tempus rhoncus lacus. Cras gravida, mauris sed suscipit vulputate, odio elit sagittis urna, non suscipit odio sapien eget ex. Ut vulputate ante sit amet diam tempus, eget tempus dolor sodales. Etiam quis orci posuere, interdum diam quis, tincidunt urna. Vivamus lectus lectus, hendrerit in sapien quis, tempor sollicitudin sem. Proin quis sem lectus. Fusce quis molestie enim, quis dapibus lacus. Nulla fringilla metus a odio lacinia feugiat. Vivamus rutrum diam placerat tristique scelerisque. Integer a iaculis justo, a tempus lorem.</p>
</div>
<div class="bottom">
<p>Little Text</p>
</div>
</div>