Struggling with implementing scrolling in my Angular application using Flexbox. Despite reviewing numerous flex examples, I am unable to achieve the desired scroll effect on a specific section. This is more of a question related to Flexbox rather than Angular.
I have attempted to replicate the issue as closely as possible, and it persists even in this example on stackblitz
The goal is to create a wizard-like application where buttons remain fixed at the bottom while different components are swapped in and out.
The structure in app.component.html is outlined below:
<div id="outer-container">
<div id="router-outlet-parent">
<router-outlet></router-outlet>
</div>
<app-buttons></app-buttons>
</div>
The pages are routed into
<router-outlet></router-outlet><app-buttons></app-buttons>https://i.sstatic.net/k5dL5.png
One of the components (Page1) consists of a "header" (gray) and a "contents" section (pink) that needs to be scrollable.
The objective is to scroll only the pink section without affecting the header.
When applying overflow: auto in the following snippet from app.component.css, the entire component scrolls along with the gray header:
#router-outlet-parent {
flex: 1 1;
overflow: auto;
/** min-height: 0; **/
}
Setting the above code to overflow: hidden prevents scrolling altogether, leaving me stuck on how to enable scrolling specifically for the pink section identified as #main-scrolling-content in page1.component.css.
How can I achieve this functionality within the current setup?