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

Posted 2023-03-06

【中文标题】全高弯曲的角材料垫抽屉，内容自动溢出

【英文标题】：Angular Material mat-drawer in full height flex, content overflow auto

【发布时间】：2019-01-27 10:20:54

【问题描述】：

昨天我遇到了一个似乎与 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-tag 上。我还在高处测试了!important 和100vh，但没有成功。那么我怎样才能让主标签上的overflow-y 工作呢？

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

---

编辑：

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

【参考方案1】：

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

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

【讨论】：

这应该会得到更多的支持。我尝试了很多解决方案，但没有成功。没想到要像那样做 flexbox。

【参考方案2】：

在主 CSS 类中试试这个

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

【参考方案3】：

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

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

如果它不适合您，请在style.scss 中尝试以下操作：

 * overflow: hidden !important;  

【参考方案4】：

     <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 不会在路由器页面上重叠。

【参考方案5】：

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

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

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