mat-tab-group 寬度對 flex 中寬度為 100% 的容器沒有反應

Question

目前我正在開發一個包含 flexbox 設計的項目，其中有一個mat-tab-group 。 我面臨的問題是，它不能正確響應父寬度，似乎只有.parameters類中的max-width屬性會影響寬度。

<div class="flex-container">
  <!-- there are other elements in here -->
  <div class="flex-item">
    <div class="parameters">
      <form [formGroup]="form">
        <mat-tab-group mat-stretch-tabs>
          <!-- tabs placed here -->
        </mat-tab-group>
      </form>
    </div>
  </div>
</div>

刪除mat-stretch-tabs屬性也無濟於事。 使用像素值作為 flex-basis 應該使寬度計算獨立於內容。 但是，只要標簽的數量超過目標寬度允許的數量，內容就會與mat-tab-group一樣寬。 上面結構的樣式看起來像

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1 1 250px;
}

.parameters {
  overflow: hidden;     /* tested, no impact */
  min-width: 0;         /* tested, no impact */
  max-width: 350px;     /* working but always 350px */
}

我還在mat-tab-group上測試了{width: 100%}屬性，但它也沒有影響。 以下內容完全刪除了水平滾動（並且它使用了我想避免的/deep/ ）。

/deep/.mat-tab-label, /deep/.mat-tab-label-active{
  min-width: 0!important;
  padding: 3px!important;
  margin: 3px!important;
}

你有什么想法？ 我錯過了什么？

Answer 1

這不是 mat-tab-group 的問題，而是 flexbox 默認設置的問題，其中 flex item 不能小於它的內容。

min-width: 0; for flexbox 項目覆蓋它。

贊這個答案