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 */
}

我还测试了{width: 100%}上的mat-tab-group属性，但是这都没有影响。以下内容完全消除了水平滚动（并且我想避免使用/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项）会覆盖它。

对this answer表示敬意

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

1 个答案: