title: How to push mat-list-items to the bottom without using absolute position in Angular Material?
body: <p>I have just started using Angular Material and I wanted to implement the sidenav to have items that are at the bottom of the page. For now I am able to accomplish it with css.</p>
  
  <pre><code>position: absolute;
  left: 0;
  bottom: 0; 
  </code></pre>
  
  <p>Is there any way to put spaces between items? My issue comes when I resize the page, the bottom items overlap with the items which are above.</p>
  
  <p>I've included screenshots and the code below. Thanks.</p>
  
  <p><a href="https://i.stack.imgur.com/698ws.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/698ws.jpg" alt="Full screen window"></a></p>
  
  <p><a href="https://i.stack.imgur.com/lX6K8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lX6K8.jpg" alt="Resized window"></a></p>
  
  <pre><code>&lt;mat-sidenav-container class="h-screen w-screen"&gt;
  &lt;mat-sidenav #sidenav class="shadow border-0" fixedInViewport mode="side" opened&gt;  
      &lt;mat-toolbar&gt;
          &lt;button mat-mini-fab color="warn" (click)="navigation.toggle()"&gt;
              &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-fire" aria-label="SLMC Logo"&gt;&lt;/mat-icon&gt;
          &lt;/button&gt;
      &lt;/mat-toolbar&gt;
      &lt;mat-nav-list&gt;
          &lt;a mat-list-item&gt;
              &lt;button mat-icon-button&gt;
                  &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-users-cog" aria-label="Administrator"&gt;&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/a&gt;
          &lt;a mat-list-item&gt;
              &lt;button mat-icon-button&gt;
                  &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-tachometer-alt" aria-label="Services"&gt;&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/a&gt;
          &lt;a mat-list-item&gt;
              &lt;button mat-icon-button&gt;
                  &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-chart-bar" aria-label="Analytics"&gt;&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/a&gt;
          &lt;a mat-list-item&gt;
              &lt;button mat-icon-button&gt;
                  &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-plus" aria-label="Compose"&gt;&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/a&gt;
  
          &lt;!-- This is where the bottom items reside.--&gt;
          &lt;div class="absolute bottom-0 left-0"&gt; 
              &lt;a mat-list-item&gt;
                  &lt;button mat-icon-button&gt;
                      &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-bell" aria-label="Notifications"&gt;&lt;/mat-icon&gt;
                  &lt;/button&gt;
              &lt;/a&gt;
              &lt;a mat-list-item&gt;
                  &lt;button mat-icon-button&gt;
                      &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-user" aria-label="User Account"&gt;&lt;/mat-icon&gt;
                  &lt;/button&gt;
              &lt;/a&gt;
              &lt;a mat-list-item&gt;
                  &lt;button mat-icon-button&gt;
                      &lt;mat-icon inline=true fontSet="fa" fontIcon="fa-cog" aria-label="Settings"&gt;&lt;/mat-icon&gt;
                  &lt;/button&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/mat-nav-list&gt;
  &lt;/mat-sidenav&gt;
  &lt;mat-sidenav-content&gt;
      &lt;mat-sidenav-container&gt;
          &lt;mat-sidenav #navigation class="shadow border-0" fixedInViewport mode="side" opened&gt;
              &lt;app-navigation (toggleNavigation)="navigation.toggle()"&gt;&lt;/app-navigation&gt;
          &lt;/mat-sidenav&gt;
          &lt;mat-sidenav-content class="page-wrap"&gt;
              &lt;app-header&gt;&lt;/app-header&gt;
              &lt;main class="flex-1"&gt;
                  &lt;router-outlet&gt;&lt;/router-outlet&gt;
              &lt;/main&gt;
              &lt;app-footer&gt;&lt;/app-footer&gt;
          &lt;/mat-sidenav-content&gt;
      &lt;/mat-sidenav-container&gt;
  &lt;/mat-sidenav-content&gt;
  </code></pre>
  
  <p></p>