1

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!

ritual_killinz
  • 15
  • 1
  • 6

3 Answers3

1

If you continue using fxLayout all the way through, it works:

<div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto" fxLayout="column">
      <h1>Title here</h1>
      <div fxFlex 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>

Stackblitz

How i got to this solution:

Step 1:

<div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto" fxLayout="column">                           <!-- continue using fxLayout -->
      <h1>Title here</h1>
      <div fxFlex fxLayout="column" style="overflow-y:auto">        <!-- add corresponding fxFlex to child -->
        <div fxFlex>                                                <!-- add a div that can 'flex' -->
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
        </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </div>
</div>

Step 2:

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

Step 3:

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

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>
Akash
  • 4,412
  • 4
  • 30
  • 48
  • But i don't want to set an explicit height (in your example, 100px) - it needs to take up the remaining space (and scroll). – ritual_killinz Jun 20 '20 at 18:33
  • My version on above and on stackblitz was a simplified version, but in fact there are several divs deep, it's not quite a simple as adding a top:50px as i don't know for sure the height of the content outside of the scrollable area. What i'm really after is a reason why my stackblitz doesn't work - any ideas? – ritual_killinz Jun 21 '20 at 07:33
  • You didn't mention any of these in your question. Please keep your question precise. Adding more questions to the answers will mislead other users reading your question. – Akash Jun 21 '20 at 07:36
  • And making a `div` scrollable is not possible without letting that `div` know about the bounds between which it should scroll. – Akash Jun 21 '20 at 07:39
-1

Solution:

<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 style="overflow-y:auto; height: 300px;"> // <== look here
          <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>
Nazarii Oliinyk
  • 38
  • 4