mat-tab-group 宽度对 flex 中宽度为 100% 的容器没有反应

Question

目前我正在做一个项目，其中包含一个 mat-tab-group 的 flexbox 设计。我面临的问题是，它对 parents 宽度没有正确反应，似乎只有 max-width 属性在 .parameters class影响宽度。

<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 项目不能小于其内容。

min-width: 0; 对于 flexbox 项目覆盖它。

感谢

mat-tab-group 宽度对 flex 中宽度为 100% 的容器没有反应

mat-tab-group width is not reacting to width 100% container in flex

css

flexbox

angular-material

angular

mat-tab