CODEWITHSUNDEEP
cssangularflexbox
peterc
peterc

Reputation: 7863

How to get a middle section to scroll overflow using Flexbox in an Angular application

I have an Angular application, where after looking at 100s of flex examples, I just cannot get the section I want to scroll. It is an Angular application, but this is more a question on Flexbox.

I have replicated as close as I can what I have, and it has the same problem here on stackblitz

So, what I want is a wizard sort of application, where I have buttons always at the bottom, and I swap in different components.

So this is setup in app.component.html ....

    <div id="outer-container">    
        <div id="router-outlet-parent">
             <router-outlet></router-outlet>
        </div>  
        <app-buttons></app-buttons>
    </div>

The pages are routing into <router-outlet></router-outlet> and we can see the fixed buttons in <app-buttons></app-buttons>...

enter image description here

Now I have a component (Page1), that has two bit, a "header" (gray) and a "contents" section that will not fit (in the pink).

What I want is to scroll the pink section, and NOT the header.

If I set overflow to auto in the following (app.component.css), I get the whole component scrolling (including the gray header)

    #router-outlet-parent {
         flex: 1 1;
         overflow: auto;
            /** min-height: 0; **/
    }

If I set the above to overflow: hidden; then it no longer scrolls, but I just cannot get the pink section to scroll, ie the section #main-scrolling-content as in page1.component.css.

How can I do this with this setup?

Upvotes: 1

Views: 368

Answers (1)

ToastedHippie
ToastedHippie

Reputation: 86

Add this css rule to your form in page1 component

form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Upvotes: 1

Related Questions