全高弯曲的角材料垫抽屉，内容自动溢出

Question

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

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

相关的CSS是

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

在 app-sidenav 组件中，我现在有以下模板

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

相关的样式是

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 组件时，您会看到滚动条出现在文档根目录而不是主标记中。

原文由 Felix Lemke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Felix Lemke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

如果它对您不起作用，请在 style.scss 中尝试以下操作：

  *{ overflow: hidden !important; }

原文由 Rojin Gharooni 发布，翻译遵循 CC BY-SA 4.0 许可协议