Vertical scroll on element with dynamic height

I am using tailwind with reactJS. I am trying to create an element which fills the remaining space within its parent vertically, this element will then have children which should be able to overflow - in which case the parent should be scrollable. Currently I am having trouble ensuring that the parent fills the remaining space - I am using a primarily a combination of flex flex-col flex-grow to make the components fill as much of the vertical space as I would like. However - right now I find that if I set the 'scrollable parent' element to flex-grow - it will initially fill the desired amount of vertical space - however, when its children come to the point where they overflow it vertically (at which point i wish to scroll) the size of the parent container simply extends to accomodate its children. How is it that people typically go about achieving this type of effect, e.g fill the rest of the remaining vertical height and make that section scrollable. I have attached some images showing the behaviour I talk of. One shows the element without flex-grow, and how it does not expand to fill the parent by default. The other two show the behaviour when flex-grow is present - one shows how the space is initially filled as desired, the other shows that when overflow occurs the element stretches to accomodate its children instead of overflowing.