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

Question

昨天我遇到了一个CSS问题，该问题似乎与input和Angulars mat-drawer有关。我有一个带有两个孩子的全版Flexbox。顶部为router-outlet，底部为自定义组件mat-toolbar。由于flexbox具有弹性，因此可以正常工作，并且app-sidenav可以填充页面的其余部分。在继续之前，请先查看此简化设置：

app-sidenav

相关的CSS是

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

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

.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; }

相关样式是

<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; } 高的内容。滚动条显示在外部flexbox组件上，而不显示在app-sidenav标签上。我也同时在高处测试了main和!important，但没有成功。那么如何在主标签上运行100vh？

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

---

编辑：

我为此问题制作了stackblitz。导航到 ciao 组件时，您会看到滚动条出现在文档根目录而不是在主标记中。

Answer 1

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

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

Answer 2

在CSS主类中尝试使用此方法

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

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-draw 将有自己的滚动条。就像截图一样。

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

除了长页面之外，我还可以看到顶部带有自己的卷轴的 mat-draw。我希望这有助于以最少的代码实现我们想要的。