Angular material flex - scroll within fxLayout

Question

I am really struggling with what i believe to be a simple problem..

I have a header, a content area and a footer, i'm using fxLayout and in it's simplest it's this:

 <div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto">
      <h1>Title here</h1>
      <div fxLayout="column" style="overflow-y:auto">
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </div>
</div>

What i can't understand is why the red container isn't scrolling between the header and the footer.

Stackblitz here

I don't really want to add a height:100vh to the parent div as this breaks other pages, and even if i do it still doesn't work as i expect.

Really hoping somebody can shed some light on this.

Thank you in advance!

Answer 1

Set the height of container div and remove fxLayout="column" like below -

<div style="overflow-y:auto; height:100px">
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
</div>

Update

If your header and footer are fixed size (100px in below example), then you can use calc()-

<div style="overflow-y:auto; height:calc(100vh - 100px)"> 
              <div style="height:3000px;background:red;">
                Why is doesn't this scroll?
              </div>
    </div>

You can also set top and bottom for the div and set position to fixed. The div needs some information (height, top, bottom etc) for it to become scrollable -

<div style="overflow-y:auto; position:fixed; top:50px; bottom:50px; width:100%">
      <div style="height:3000px;background:red;">
        Why is doesn't this scroll?
      </div>
  </div>