Angular中mat-menu条目过多溢出页面无滚动条该如何修复

你之前给单个选项设置max-height和overflow属性不生效，是因为滚动需要限制的是所有选项的父容器（即mat-menu的弹出面板）的高度，而非单个选项，按以下步骤修改即可：

步骤1：给mat-menu添加自定义面板类 #

修改HTML代码，给mat-menu添加panelClass属性指定自定义类名：

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

步骤2：添加全局样式限制面板高度 #

mat-menu的弹出面板属于全局生成的overlay层，不属于当前组件的DOM范围，所以需要将样式写到项目全局样式文件（通常为styles.css/styles.scss）中：

.scrollable-menu {
    /* 可根据页面布局自行调整最大高度数值 */
    max-height: 400px;
    overflow-y: auto;
    /* 可选：避免出现不必要的水平滚动条 */
    overflow-x: hidden;
}

可选优化 #

建议将普通div替换为官方mat-menu-item组件，可自动继承Material Design的交互效果、无障碍适配等能力，修改后代码如下：

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

内容的提问来源于stack exchange，提问作者Sivvie Lim