How do I make only one nested div scrollable?

Issue

Image

I want the red portion to remain fixed and only the blue portion to scroll when there is an overflow. (The red portion consists of 2 divs)

I am able to make the Entire thing scrollable, but I want the red to remain fixed.
(I have already tried position: fixed but it is not working properly, search and headers are getting on top of each other)

Solution

Make your header (i.e., red portion) in different component and list in different component and make list component scrollable by giving it a fixed height.

Created Sandbox representing the similar solution :-

https://codesandbox.io/s/fixed-header-list-9gjvd7

Answered By – Sonam Gupta

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published