Angular：页面上的垫子菜单项太多

Question

我有一个垫子菜单和 div 里面的垫子菜单项。有时项目较少有时项目较多取决于获取的数据。

但是我发现当它更多的时候，它不会像我想象的那样有一个垂直滚动条，而是直接离开mat-menu并在页面上流动。

我尝试用 overflow: auto 为 mat-menu-item 修复 max-height 但它不起作用。

目前看起来是这样的：

这是我当前的 html 和 css

        <mat-menu #emailOptionsMenu="matMenu" xPosition="before">
            <div class="dropdown_item" *ngFor="let user of filteredUsers">
                {{user}}
            </div>
        </mat-menu>

.dropdown_item {
    padding: 6px 20px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

我该如何解决这个问题？

Answer 1

将此添加到 css

::ng-deep .mat-menu-content{
  max-height: 300px; 
  overflow: scroll;
}

Angular：页面上的垫子菜单项太多

Angular: Too many mat-menu items that goes over the page

css

angular-material

angular