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

【问题标题】：mat-tab-group width is not reacting to width 100% container in flexmat-tab-group 宽度对 flex 中的宽度 100% 容器没有反应
【发布时间】：2019-08-21 08:28:45
【问题描述】：

目前我正在做一个项目，其中包含一个 mat-tab-group 的 flexbox 设计。我面临的问题是，它没有对父母的宽度做出正确的反应，而且似乎只有 .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;
}

你有什么想法吗？我错过了什么？

【问题讨论】：

我也有同样的问题
如果您有解决方案，请告诉我。 :)

标签： css angular flexbox angular-material mat-tab

【解决方案1】：

这不是 mat-tab-group 的问题，而是 flexbox 默认设置，其中 flex 项不能小于其内容。

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

感谢this answer

【讨论】：

谢谢，我明天测试一下，告诉你。