Prevent Addition of scrollbar to mat-drawer-inner-container in Angular mat-drawer Component

Question

Context: I am working on a screen where I need to use a mat-drawer, the mat-drawer will display a custom component. However, the custom component is being nested inside a div (with class="mat-drawer-inner-container") and the div is automatically added by the mat-drawer component. this is the structure of my html component of the parent screen (from where I open the drawer)

<mat-drawer>
    <custom-component-directive></custom-component-directive>
</mat-drawer>

after the div being added by angular (as seen in chrome dev tools)

<mat-drawer>
    <div class="mat-drawer-inner-container">
        <custom-component-directive></custom-component-directive>
    </div>
</mat-drawer>

The issue is that div also adds a scrollbar (the scrollbar is useless as it can't be moved based on the number of entries in the table, and stays the same size no matter the number of entries), to the entire component, which I don't want, I already have my own virtual-scrollbar added to the table of the custom-component from within it. this ends up adding two scrollbars.

The whole thing ends up looking like this: Real content not disclosed in the image (markers applied)

after experimenting in the Chrome dev tools, I found that, if I apply the overflow-y: hidden style to the generated .mat-drawer-inner-container div, the scrollbar gets hidden as expected.

To actually apply this in the real components. So far I have tried doing the following things with no luck:

1. tried accessing the mat-drawer-inner-container using css linked to the parent component

.mat-drawer .mat-drawer-inner-container {
    overflow-y: hidden;
}

2. tried accessing the parent element of the custom component directive by using the :host pseudo selector in the custom component's CSS

:host .mat-drawer-inner-container {
     overflow-y: hidden;
}

3. I have tried passing the styles as !important for it to take precedence in both the part 1 and 2.
4. even using inline styles as a desperate last resort.

I am a CSS and styling noob in general, would appreciate any help and suggestions.

Answer 1

Several components create HTMLElements "on-fly", so we can not change the .css when we add the .css to the components.css, should be "global". In general we add the .css in "styles.css" with "more especific" tag.

It's the reason most component of Material have a method to indicate a "Class", can be pannel class or simply add the class to the component.

e.g.

<!--see the "example-container" class -->
<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>Drawer content</mat-drawer>
  <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

in styles.css (or in any general styles to all the application)

/*see the ".example-container<space>"*/
.example-container .mat-drawer .mat-drawer-inner-container {
  border:1px solid red;
  box-sizing: border-box;
  overflow-y: hidden;
}

NOTE: If we don't use the "more specific" .css, that's: only add the .css in styles.css this affect to all the mat-drawers in our application. This is the correct approach when we want to change the appearance to, e.g. all the mat-datepicker.