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

Question

currently I am working on a project which contains a flexbox design in which a mat-tab-group . The problem I am facing is, it does not properly react to the parents width and it seems only the max-width property in the .parameters class influences the 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>

Removing the mat-stretch-tabs property does not help neither. Using a pixel value as flex-basis should make the width calculations independent of the content. But as soon as there are more tabs than the targeted width allows, the content will be as wide as the mat-tab-group . The styling of the above structure looks like

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

also I tested a {width: 100%} property on the mat-tab-group but it has no impact neither. The following removes the horizontal scroll at all (and it uses /deep/ which I would like to avoid).

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

Do you have any ideas? What am I missing?

Answer 1

It's not a problem with mat-tab-group, but with flexbox default settings, where flex item can't be smaller that its content.

min-width: 0; for flexbox item overrides it.

kudos to this answer