Angular Material mat-drawer 全高 flex，内容自动溢出

Question

昨天我遇到了一个 CSS 问题，它似乎与 mat-drawer 和 Angulars router-outlet 有关。我有一个包含两个 children 的整页 flexbox。顶部的 mat-toolbar 和底部的自定义组件 app-sidenav。这工作正常并且 app-sidenav 填充页面的其余部分，因为 flexbox 是有弹性的。在继续之前先看看这个简化的设置：

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

相关样式为

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

这很好用并且高度合适，除非没有内容大于app-sidenav高度。滚动条出现在外部 flexbox 组件而不是 main 标签处。我还在高处测试了 !important 和 100vh 但没有成功。那么我怎样才能让主标签上的 overflow-y 起作用呢？

我很确定有一个简单的技巧，但我不知道。谢谢你的帮助。干杯！

编辑：

我针对这个问题做了一个stackblitz。当您导航到 ciao 组件时，您会看到滚动条出现在文档根目录而不是主标记中。

Answer 1

试试这个主要的 css class

main { 
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px; 
}

Answer 2

除了@Sakkeer 的工作解决方案之外，我还找到了另一种无需修改位置属性但使用 flex 的方法。只需将以下 css 规则添加（而非替换）到现有样式即可。

app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }

Answer 3

     <mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
        <mat-drawer #drawer mode="side" class="toolbar">
            <app-sidenav></app-sidenav>
        </mat-drawer>
        <router-outlet></router-outlet>
     </mat-drawer-container>

上面的代码对我有用，当我直接放置样式并使用自动调整大小时，mat-drawer-container 将不会在路由器页面上重叠。

Answer 4

它将添加两个滚动条。一个用于主页滚动，另一个滚动条用于从左侧滑动的垫图。 mat-draw 将有自己的滚动条。就像截图一样。

.mat-drawer.mat-drawer-end {
    position: fixed;
    overflow: auto;
}

除了页面很长之外，我还可以看到顶部的垫图有自己的滚动条。我希望这有助于用最少的代码实现我们想要的。

Answer 5

这对我有用！将其添加到 style.scss:

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

如果它对您不起作用，请尝试以下 style.scss:

 *{ overflow: hidden !important; }

Angular Material mat-drawer 全高 flex，内容自动溢出

Angular Material mat-drawer in full height flex, content overflow auto

css

flexbox

angular-material

angular

angular-router