mat-drawer-content with padding doesn't allow the scroll to go to the bottom of the page

Question

Yesterday I faced a problem with my application scroll. I'm using Angular Material and I have a layout organized in the following areas:

• mat-toolbar at the top of the page;
• mat-drawer on the left side of the page for navigation purpose;
• mat-drawer-content where I have my router-outlet.

For a better lookout, I gave my mat-drawer-content a padding style with 32px 64px values (padding: 32px 64px;). I think this is the main problem of my issue because when I remove this padding the scroll works fine and goes at the end of the page showing all the content. When the padding is applied, my mat-drawer-container has always less height than mat-drawer-content.

The only I found to fix this is using the overflow: overlay; for mat-drawer-content, but the problem is still there and because I have a double scroll with this padding configuration, when one scroll is down, I still need to push the other one to the bottom (which causes a bad user experience).

If I apply a margin instead of a padding, the same occurs, so my question is: is there any way to provide a good padding/margin in the mat-drawer-content without messing with scroll in the content area?

My HTML structure:

<div class="app-main-wrapper-full">
   <mat-toolbar color="primary">
      ...
   </mat-toolbar

   <mat-drawer-container class="full-heigth" hasBackdrop="true" autosize>
      <mat-drawer #drawer mode="side">
         <mat-nav-list>
            ...
         </mat-nav-list>
      </mat-drawer>
      <mat-drawer-content class="full-heigth">
         <router-outlet></router-outlet>
      </mat-drawer-content>
   </mat-drawer-container>
</div>

My CSS:

.app-main-wrapper-full {
    height: 100%;

    mat-toolbar {
      border-bottom: 4px solid $light-blue;
    }

    mat-drawer-content {
      height: 100%;
      padding: 32px 64px;
      background-color: $light-grey;
    }
}

.full-heigth {
   height: 100%;
}

Answer 1

I found a solution. I've removed the padding:32px 64px from mat-drawer-content and applied it in a new div, where router-outlet is included.

Final HTML:

<div class="app-main-wrapper-full">
   <mat-toolbar color="primary">
      ...
   </mat-toolbar

   <mat-drawer-container class="full-heigth" hasBackdrop="true" autosize>
      <mat-drawer #drawer mode="side">
         <mat-nav-list>
            ...
         </mat-nav-list>
      </mat-drawer>
      <mat-drawer-content class="full-heigth">
         <div class="content">
             <router-outlet></router-outlet>
         </div>
      </mat-drawer-content>
   </mat-drawer-container>
</div>

Final CSS

.app-main-wrapper-full {
    height: 100%;

    mat-toolbar {
      border-bottom: 4px solid $light-blue;
    }

    mat-drawer-content {
      height: 100%;
      background-color: $light-grey;
    }

    .content {
        padding: 32px 64px;
    }
}

.full-heigth {
   height: 100%;
}