让内容在<mat-sidenav>之外流动，而不是为其创建滚动条

Question

基本上，我希望我的下拉菜单出现在我的dropdownbutton的右侧，当我点击它时，它已经起作用了。然而，下拉菜单太宽了，所以sidenav创建了一个水平滚动条来显示所有内容。我希望我的下拉菜单忽略sidenav的边界，并在它的外部流动。这个是可能的吗？

这是我的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>

css真的无关紧要，我试着添加overflow: hidden，但是内容不会流到sidenav之外。(因为我在逻辑上隐藏了它)

Answer 1

我通过检查页面找到了一种解决方法。在mat-sidenav元素内部，有一个将溢出设置为auto的mat-drawer- scroll container元素(导致不需要的滚动行为)。问题是我只能全局覆盖这个类的属性(至少我这么认为，我是个css新手)。我还发现了这个老问题：https://github.com/angular/components/issues/13983因此添加了

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

(不确定是否有必要成功覆盖!important )用它覆盖不想要的自动溢出。应该可以指定css类，以使此更改不适用于所有的mat-drawer-drawer container元素。尽管如此，一个更好的解决方案还是值得感谢的。