I am trying to create a main layout with a fixed header that will scroll its main content when necessary. However, I want to have control over how the main content scrolls itself. My goal is to keep the header and paragraph at the top, while allowing only the list of scrollable items to be scrolled. How can I achieve this without removing the div.mywrap element?
The header should remain in place as desired, but I am facing difficulties inside the main tag where the paragraph should stay on top and the rest of the content should scroll. Here is my code snippet:
*{
box-sizing:border-box;
}
header{
background-color: red;
flex: 1 0 auto;
}
p{
background-color: blue;
}
.mywrap{
display: flex;
flex-direction: column;
max-height: 400px;
}
main{
display: block;
flex-grow: 1;
overflow: scroll;
}
.scrollable{
overflow: scroll;
}<div class="mywrap">
<header>
IM a HEADER and I ALWAYS want to be ON TOP
</header>
<main>
<section class="aot">
<p>
I want this paragraph to NOT TO SCROLL DOWN and be on top as well
</p>
</section>
<section class='scrollable'>
<!-- List of scrollable items -->
</section>
</main>
</div>For a complete example, please refer to the code and demo here: https://jsfiddle.net/Lwgd26vt/23/