title: Angular Material page not scrolling with content inside?
body: <p><strong>Edit</strong> 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:</p>
  
  <pre><code>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%)'}))
      ])
    ]);
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;div class="primaryColorBG" style="height:60%;"&gt;
    &lt;div fxFlex fxLayoutAlign="center center"&gt;
      &lt;div [ngStyle]="{'fontSize': '3rem'}" [ngStyle.lt-md]="{'fontSize': '2rem'}" [ngStyle.lt-sm]="{'fontSize': '1.5rem'}"  class="text-right title-font accentTextColor"&gt;Callum&lt;br&gt;Tech&lt;/div&gt;
      &lt;div style="padding-left:10px;" [ngStyle]="{'fontSize': '2rem'}" [ngStyle.lt-md]="{'fontSize': '1.25rem'}" [ngStyle.lt-sm]="{'fontSize': '0.9rem'}"&gt;
        &lt;div class="text-left"&gt;Angular Framework&lt;/div&gt;
        &lt;div class="text-left"&gt;Google Design Standards&lt;/div&gt;
        &lt;div class="text-left"&gt;Responsive Layout&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div
       fxLayout="column"
       fxLayoutAlign="center"
       fxLayoutGap="10px"&gt;
    &lt;div class="item item-4" fxFlex="400px"&gt;Item 4&lt;/div&gt;
    &lt;div class="item item-5" fxFlex="200px"&gt;Item 5&lt;/div&gt;
  &lt;/div&gt;
  &lt;mat-toolbar&gt;test&lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>There is no css or javascript for this page but the global css file is this:</p>
  
  <pre><code>@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,
    )
  );
  </code></pre>
  
  <p>Its being called within within the router function below a navbar component</p>
  
  <p>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</p>
  
  <p><strong>note</strong> I am running bootstrap v4 css with my Material 2 </p>
  
  <p><strong>edit</strong> </p>
  
  <blockquote>
    <p>Is there enough content to allow scrolling?</p>
  </blockquote>
  
  <p>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</p>