如何调整Angular Material Select面板位置以避免超出屏幕

我的网站主导航栏右侧有一个mat-select组件用于选择货币。导航栏仅需显示货币缩写（如USD），但下拉面板要展示国旗图标、货币名称及缩写，因此将面板尺寸设得比选择框大，结果面板超出屏幕无法完整显示。现寻求简便方法确保面板始终处于浏览器可视范围内，即面板位置不超过选择框的末端。

当前表现

预期表现

HTML代码

<header>
    <mat-toolbar class="navbar">
      <button mat-icon-button aria-label="Menu Icon">
      <mat-icon>menu</mat-icon>
      </button>
      <span>My Website</span>
      <div class="navbar-currency">
        <mat-form-field class="currency-select">
          <mat-select name="currency" panelClass="currency-panel" [(value)]="selectedCurrency">
            <mat-select-trigger>{{selectedCurrency}}</mat-select-trigger>
            <mat-option *ngFor="let currency of currencyArr" [value]="currency.key">
              <span class="fi fi-{{currency.icon}}"></span> {{currency.key }} - {{ currency.name}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-toolbar>
</header>

CSS代码

.navbar {
  background: #ffffff;
  display: flex;
  padding-left: 2rem;
  padding-right: 2rem;
}

.navbar-currency{
  margin-left: auto;
  margin-top: 1.3rem;
}

.currency-select{
  font-size: 0.85rem;
  width: 80px;
}

.currency-panel.mat-mdc-select-panel {
  font-size: 0.85rem;
  min-width: calc(100% + 120px)
}

.currency-panel.mat-mdc-select-panel .fi{
  margin-right: 0.1rem;
}

.currency-panel.mat-mdc-select-panel .mat-mdc-option{
  min-height: 36px;
}

针对这个场景，有两种简便的解决方式：

方法1：使用mat-select内置属性调整展开方向 #

给<mat-select>添加position="before"属性，让下拉面板向选择框左侧展开，自动避开右侧屏幕边界：

<mat-select name="currency" panelClass="currency-panel" [(value)]="selectedCurrency" position="before">
  <!-- 原有内部结构保持不变 -->
</mat-select>

这个属性是Material组件原生支持的，无需额外CSS，适配性最好。

方法2：自定义CSS强制面板对齐右侧 #

如果不想改变展开方向，可以通过CSS调整面板定位，让其右边缘与选择框右边缘对齐：

.currency-panel.mat-mdc-select-panel {
  font-size: 0.85rem;
  min-width: calc(100% + 120px);
  /* 添加以下两行 */
  right: 0 !important;
  left: auto !important;
}

这样面板会向左延伸，不会超出屏幕右侧。

额外优化 #

如果担心小屏幕下面板过宽，可添加最大宽度限制：

.currency-panel.mat-mdc-select-panel {
  /* 原有样式 */
  max-width: 280px; /* 根据实际内容调整合适值 */
}

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