How to make a React child component on a page scroll

Question

When applying overflow-y-auto to a page it allows whole page to scroll instead of only a component

Tried finding more in depth solutions online, but to no avail

<div className="page-container h-full">
    <div className="parent-container h-full">
        <div className="apply-scroll-here overflow-y-auto">


    </div>
</div>

Answer 1

Seems like the solution to this is to apply flex-col on the page container and flex-1 and overflow hidden of direct parent of the scrolling child component

<div className="flex h-full flex-col">
    //page-container 
    <div className="flex-1 overflow-hidden">
        //parent-container
        <div className="h-full overflow-y-auto">
            //apply-scroll-here only 

    </div>
</div>