让内容流出<mat-sidenav>而不是为它创建滚动条</mat-sidenav>

Question

Basically I want my dropdown menu to appear on the right side of my dropdownbutton when I click it which already works. The dropdown menu is to wide however, to fit into my so the sidenav creates a horizontal scrollbar to show all the content. I want my dropdown menu to ignore the bounds of the sidenav and flow outside of it. Is this possible?

Here is my html

    <mat-sidenav mode="side" #sidenav opened class="dialogCreationMenu">
    <div class="dropdown">
      <button class="dropdownButtonParent" (click)="toggled = !toggled">
          <span>dropdown menu</span>
      </button>
      <div class="dropdown-content" [ngClass]="toggled ? 'dropdown-content-visible' : ''">
        <button class="dropdownButtonChild">
            <span>action1</span>
        </button>
        <button  class="dropdownButtonChild">
            <span>action2</span>
        </button>
      </div>
    </div>
  </mat-sidenav>

The css doesn't really matter, I tried adding overflow: hidden but the content wont flow outside the sidenav. (because I hid it logically)

Answer 1

I found a workaround by inspecting the page. Inside of the mat-sidenav element, there is a mat-drawer-inner-container element with overflow set to auto (resulting in the unwanted scroll behaviour). Problem is that I can only override the properties of this class globally (atleast I think so, I'm new with css). I also found this old issue to it: https://github.com/angular/components/issues/13983 So adding

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

(not sure if the.important is necessary to override sucessfully) With this I override the unwanted auto overflow. It should be possible to specify the css class in order to make this change not apply to all mat-drawer-inner-container elements. A better solution would be appreciated tho.