Scrolling item in grid or flex layout

Question

I'm trying to achieve the following dynamic layout, with items filling up each row while maintaining approximately the same amount of width:

         available width
<------------------------------->
 ~25rem
<------->

+-------+-------+-------+-------+
|1      |2      |3      ^4      |
|much   |less   |with   |stuff  |
|stuff  |stuff  |scroll |       |
|here   |       |bar ...v       |
+-------+-------+-------+-------+
|5      |6      | ...
|stuff  |       | etc
+-------+-------+

I want item #3 to not influence the height of the row it is located in, and use a scrollbar instead if necessary. Is there a way to make it work?

This is the code I've got so far:

<main>
    <section>1 much stuff here</section>
    <section>2 less stuff</section>
    <section class="scrollable">3 with scroll bar, lots more stuff...</section>
    <section>4 stuff</section>
</main>

main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
}
.scrollable { /* does nothing :( */
    height: 100%;
    overflow: auto;
}

Unfortunately, it does not work: The height of the column expands to accomodate the content of item #3, so the scrollbar is never shown.