css - 全高度 flex 的 Angular Material 垫抽屉，内容自动溢出

Question

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

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

Answer 1

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

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