如何使Angular mat-button-toggle按钮组内按钮适配宽度无溢出？

我希望第一个数字按钮组（0-22）能像第二个时段按钮组（noche、mañana等）一样，根据外部元素调整尺寸。已将按钮组和单个按钮的宽度都设为100%，但数字按钮被截断且溢出。想询问如何让24个按钮合理分配可用宽度且不溢出？

现有代码 #

HTML代码 #

<div class="row">
    <div class="col-12">
        <label>Horas</label>
        <div>
            <mat-button-toggle-group [formControl]="hoursCtrl" multiple>
                <mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{hour}}</mat-button-toggle>
            </mat-button-toggle-group>
        </div>
        <mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
            <mat-button-toggle *ngFor="let dMoment of dayMoments; let i = index" [value]="i">{{dMoment}}
            </mat-button-toggle>
        </mat-button-toggle-group>
    </div>
</div>

SCSS代码 #

.mat-button-toggle-group {
    height: 20px; 
    font-size: 11px;
    align-items: center;
    width: 100%;
}

.mat-button-toggle {
    width: 100%;
}

解决方案 #

问题出在mat-button-toggle默认布局逻辑上，直接设width:100%会让每个按钮试图占满组宽度，导致溢出。可以通过以下方式修复：

• 用弹性布局分配宽度
  给按钮组开启弹性布局，让每个按钮自动平分可用空间，修改SCSS：

  .mat-button-toggle-group {
      height: 20px; 
      font-size: 11px;
      align-items: center;
      width: 100%;
      display: flex; /* 开启弹性布局 */
  }
  
  .mat-button-toggle {
      flex: 1; /* 每个按钮平分组的可用宽度 */
      width: auto; /* 移除原100%宽度设置 */
  }
  

  flex:1会让所有按钮自动适配容器宽度，平均分配空间，避免溢出。

• 优化按钮内边距与最小宽度
  如果按钮文字仍被挤压，可调整内边距或设置最小宽度保证内容显示：

  .mat-button-toggle {
      flex: 1;
      width: auto;
      padding: 0 4px; /* 缩小内边距适配小尺寸 */
      min-width: 24px; /* 设置最小宽度，确保数字完整显示 */
  }
  

• 统一选中状态样式
  若选中按钮的样式导致宽度变化，可统一选中与未选中状态的内边距：

  .mat-button-toggle.mat-button-toggle-checked {
      padding: 0 4px;
  }
  

调整后，数字按钮组会和时段按钮组一样自适应容器宽度，24个按钮合理分配空间且不会溢出。

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