Angular Material page not scrolling with content inside?

Question

Edit The problem is the router animation forcing 'fixed' position, if I disable animation it fixes it, but I want to use animation so im trying to figure out how to fix that. This is the animation code being called that forces 'fixed' thus breaking scroll:

function slideToBottom() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%', height:'100%'}) ),
    state('*', style({position:'fixed', width:'100%', height:'100%'}) ),
    transition(':enter', [
      style({transform: 'translateY(-100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateY(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateY(100%)'}))
    ])
  ]);
}

I am working on a landing page but I cannot for the life of me figure out why it refuses to scroll, Here is the component HTML:

<div class="primaryColorBG" style="height:60%;">
  <div fxFlex fxLayoutAlign="center center">
    <div [ngStyle]="{'fontSize': '3rem'}" [ngStyle.lt-md]="{'fontSize': '2rem'}" [ngStyle.lt-sm]="{'fontSize': '1.5rem'}"  class="text-right title-font accentTextColor">Callum<br>Tech</div>
    <div style="padding-left:10px;" [ngStyle]="{'fontSize': '2rem'}" [ngStyle.lt-md]="{'fontSize': '1.25rem'}" [ngStyle.lt-sm]="{'fontSize': '0.9rem'}">
      <div class="text-left">Angular Framework</div>
      <div class="text-left">Google Design Standards</div>
      <div class="text-left">Responsive Layout</div>
    </div>
  </div>
</div>
<div
     fxLayout="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px">
  <div class="item item-4" fxFlex="400px">Item 4</div>
  <div class="item item-5" fxFlex="200px">Item 5</div>
</div>
<mat-toolbar>test</mat-toolbar>

There is no css or javascript for this page but the global css file is this:

@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import '~@angular/material/theming';

// Define a custom mixin that takes in the current theme
@mixin theme-color-grabber($theme) {
  // Parse the theme and create variables for each color in the pallete
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  // Create theme specfic styles
  .primaryColorBG {
    background-color: mat-color($primary);
  }
  .accentColorBG {
    background-color: mat-color($accent);
  }
  .warnColorBG {
    background-color: mat-color($warn);
  }
  .accentTextColor {
    color: mat-color($accent)
  }
  .primaryTextColor {
    color: mat-color($primary)
  }
  .warnTextColor {
    color: mat-color($warn)
  }
}

.title-font {
  font-family: "Comfortaa";
}


//Palettes
$mat-black: (
  50 : #e2e2e2,
  100 : #b7b7b7,
  200 : #878787,
  300 : #575757,
  400 : #333333,
  500 : #0f0f0f,
  600 : #0d0d0d,
  700 : #0b0b0b,
  800 : #080808,
  900 : #040404,
  A100 : #a6a6a6,
  A200 : #8c8c8c,
  A400 : #737373,
  A700 : #666666,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #ffffff,
    400 : #ffffff,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #ffffff,
    A700 : #ffffff,
  )
);

Its being called within within the router function below a navbar component

I have no clue why its doing this and ive never really run into such a problem, ive checked for 'position fixed' etc but doesnt seem like its anything in my style sheets that has it

note I am running bootstrap v4 css with my Material 2

edit

Is there enough content to allow scrolling?

Yes, i have an element that is 60% of the page height wise, and then i added 2 items stacking ontop of each other and if you scroll out really far you can see them at the bottom

Answer 1

In my experience you are using fxFlex for a flexGridLayout.

I cannot see what is being 'Fixed' but adding a css style like this to the element containing the content you want to scroll, may help solve your issue.

overflow-y: auto;