Prevent CSS grid row heights growing with dynamic content - css

Question

Is it possible to define a CSS grid, with auto-rows (a dynamic number thereof) which size to a container based only on the number of them, i.e. filling the available vertical space - and then containing any content within that vertical space.
See below, the left hand side shows the equal row height sizes assigned when the content does not cause the rows to grow.
On the right is the problem - long text causes the heights to then become unequal.
The code is at this pen:
https://codepen.io/jamesharcourt/pen/GRBdRWo
In the image above, I want the sizes to remain as per the left and the text to essentially not be visible / overflow to be hidden.
Sample css:
.columns {
display: flex;
}
.content-area {
height: 300px;
width: 500px;
display: grid;
grid-auto-rows: 1fr;
background: pink;
}
.item {
margin: 2px;
background: gray;
}
Sample HTML:
<div class="columns">
<div class="content-area">
<div class="item">1 short text</div>
<div class="item">2 short text</div>
<div class="item">3 short text</div>
<div class="item">4 short text</div>
</div>
<div class="content-area">
<div class="item">1 short text</div>
<div class="item">2 short text</div>
<div class="item">3 short text</div>
<div class="item">4 long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
</div>
</div>

Answer 1

Here is how you can do it :
.item {
margin: 2px;
background: gray;
height:150px;
overflow-y: auto;
}