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

Question

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>...

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?

ToastedHippie · Accepted Answer · 2021-03-26 04:50:24Z

1

Add this css rule to your form in page1 component

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

answered Mar 26, 2021 at 4:50

ToastedHippie

862 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

peterc Over a year ago

thankyou! This seems to do exactly what I am after. Trying to understand why this works... my understanding is so it needs form 100% so it does not grow past the bounds of it's parent container (I don't know why any element EVER does this, but they just do) - but not sure why it needs to be flex too - but it does otherwise it does not work (everything I think I am getting layout/flex, I disappoint myself). Anyway, thankyou.

ToastedHippie Over a year ago

Elemet's height is auto by defoult, so it grows to it's content. So we bounding form to it's parent heght. Then make form flex with column direction to layout it's children verticaly and make .main-scrolling-content become flex item so it fills all free space. Without flex we would calculate height of .main-scrolling-content like calc(100% - 20px) where 20px is header height. But we must have header fixed height. With flexbox it becomes more, you know, flexible :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related