3

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

<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;
}

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

4

1 回答 1

1

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

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

感谢这个答案

于 2019-04-11T14:37:17.283 回答