如何制作可滚动的mat-list

Posted 2023-02-19

【中文标题】如何制作可滚动的mat-list

【英文标题】：How to make scrollable mat-list

【发布时间】：2018-04-03 21:33:54

【问题描述】：

我正在尝试使用 Angular 4.4.6 和 Angular Material 2.0.0-beta.12 在响应式高度容器中构建一个垫列表。如何在不溢出父容器的情况下使 mat-list 可滚动？

这是 stackblitz 网址：https://stackblitz.com/edit/angular-material2-issue-tedisv?file=app%2Fapp.component.scss

:host
  border: 3px dashed red;
  width: 100%;
  min-height: 150px;
  max-height: 350px;
  height: 10%;
  display: flex;
  flex-direction: column;
  mat-toolbar 
    flex-grow: 0;
  
  mat-list 
    flex-grow: 1;
    border: 3px solid green;
  

【问题讨论】：

演示在angular-material2-issue-tedisv.stackblitz.io

【参考方案1】：

mat-list 
    flex-grow: 1;
    border: 3px solid green;
    overflow: auto;

我确定我昨天（在发布问题之前）尝试了 overflow: auto;，但没有成功。但今天它起作用了。 我可能遇到了与 ng cli 或浏览器缓存相关的缓存问题。

【参考方案2】：

添加以下css：

mat-list  overflow: auto;