3

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?

Felix Lemke
  • 6,189
  • 3
  • 40
  • 67

1 Answers1

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

eagor
  • 9,150
  • 8
  • 47
  • 50