How make a flex grow div hide its overflow content

Using tailwinds css. I have a div which takes all available space thanks to flex-grow class. It also has overflow-scroll to hide its content.

Inside this div I have a component with h-full class. The content of this component is a list of cards. I want it to be limited in height by its parent.

But the component is not limited in height by its parent. I have to set a fixed height so the the overflow content is hide and scrollable.

However I do not want to set a fixed height as the list of cards is variable.

Stackblitz : https://stackblitz.com/edit/angular-playground-v13-2-ga3ymh?file=src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.component.html