bug/feature(sidenav) limited customization caused by 'mat-drawer-inner-container' element

Bug, feature request, or proposal:

Bug or feature request

What is the expected behavior?

Sidenav to be fully customizable as it was before

What is the current behavior?

Having inserted a not-stylable container div between mat-drawer and the actual content, I cannot manage height and scrolling as before.

What is the use-case or motivation for changing an existing behavior?

For example, in my case I have a ‘collapser’ button inside sidenav (toggle between normal and drawer mini mode) which must stick to the top while allowing other options to scroll.

<sidenav-container>
  <sidenav>
    <collapser></collapser>
    <links-container perfectScrollbar>
      <link></link>
    </links-container>
  </sidenav>
  <sidenav-content> ... </sidenav-content>
</sidenav-container>

This worked well without the intermediate div, because I could use display: flex to manage the height and scrolling making the links-container to take all available height minus that taken by the collapser element.

.mat-sidenav {
  display: flex;
  flex-direction: column;
}

Now I can’t do it anymore and I’m forced to use global CSS to put the very same rules on the mat-drawer-inner-container, because I cannot style it from inside the component because of CSS scoping.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7 Material 7

Is there anything else we should know?

The added element is documented here

https://github.com/angular/material2/blob/76044e8b5c3a6342b05d2e89dfb3b4ccf308c422/src/lib/sidenav/drawer.scss#L162-L167

[pradeepbetty]

I don’t understand how do you even make “not-stylable” elements?

you can style it.

.mat-drawer-inner-container {
       display: flex;
       flex-direction: column;
     }

[jumarjuaton]

Try this temporary solution. This worked for me:

::ng-deep .mat-drawer-inner-container {
     overflow: visible!important;
}