angular – 如何制作可滚动的mat-list

发布时间：2020-12-17 17:29:28 所属栏目：安全来源：网络整理

导读：我正在尝试使用Angular 4.4.6和Angular Material 2.0.0-beta.12在响应高度容器内构建一个mat-list.如何在不溢出父容器的情况下使mat-list可滚动？这是stackblitz网址：https://stackblitz.com/edit/angular-material2-issue-tedisv?file=app%2Fapp.componen

我正在尝试使用Angular 4.4.6和Angular Material 2.0.0-beta.12在响应高度容器内构建一个mat-list.如何在不溢出父容器的情况下使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;
  }
}

解决方法

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

我确定我已经尝试过溢出：auto;昨天(在发布问题之前)并没有奏效.但今天它有效.我可能遇到过与ng cli或浏览器缓存有关的缓存问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!