How do I make only one nested div scrollable?-CodePudding

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)

CodePudding user response：

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

CodePudding user response：

.container {
  flex: 1;
  height: 100vh; // if you want the container to fill the viewport's height
}

.header {
  height: 100px;
}

.scrollable {
  height: 100%;
  overflow-y: auto;
}