Question 229631 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make a React child component on a page scroll

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    To make the apply-scroll-here element the only element that is scrollable, you can set the overflow property of the parent-container element to overflow-y:hidden. This will hide the vertical scrollbar for the parent-container element, but it will still allow the apply-scroll-here element to have a vertical scrollbar.

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


        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search