Angular Material中mat-toolbar内右侧mat-menu被截断无法完整显示问题

你使用flex占位span实现左右元素分隔的写法是正确的，菜单被截断和布局对齐逻辑无关，是Angular Material菜单组件的默认弹出定位规则导致的。

问题原因 #

mat-menu 默认会以触发按钮的左边缘为基准向右展开菜单，当触发按钮被推到视口最右侧时，菜单的总宽度超过视口右侧的剩余空间，就会出现内容被截断的情况。

可用解决方案 #

• 调整菜单弹出对齐方向
  给菜单触发按钮添加matMenuTriggerPosition配置，将x轴对齐方向设为before，让菜单以触发按钮的右边缘为基准向左展开，就不会超出视口右侧：

<mat-toolbar>
  <button mat-button>Test</button>
  <span class="space"></span>
  <!-- 给触发按钮添加定位配置 -->
  <button mat-button [matMenuTriggerFor]="userMenu" [matMenuTriggerPosition]="{xPosition: 'before'}">
    Robert
  </button>
  <mat-menu #userMenu="matMenu">
    <!-- 菜单项内容 -->
  </mat-menu>
</mat-toolbar>

你原有样式可保留无需修改：

.space{
   flex: 1 1 auto;
}

• 修复工具栏隐藏溢出的默认样式
  如果修改对齐方式后仍然存在截断，可检查mat-toolbar的overflow属性，部分版本默认设置为hidden，会裁剪超出工具栏范围的内容，添加如下样式即可：

mat-toolbar {
  overflow: visible !important;
}

• 自定义菜单偏移
  如果需要调整菜单和按钮的相对位置，可给mat-menu添加自定义面板类调整偏移量：

<mat-menu #userMenu="matMenu" panelClass="custom-menu-panel">
  <!-- 菜单项内容 -->
</mat-menu>

.custom-menu-panel {
  margin-right: 12px !important;
}

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