Material-Tabs not shrinking correctly when using flexbox

Question

In my app, the material tabs don't shrink correctly when the width of the page decreases when using flexbox.

I was able to replicate the issue here: https://stackblitz.com/edit/angular-xthdcw

Code:

.panel{
  padding: 24px;
  border: 1px solid black;
  margin-right: 20px;
}

.container{
  display: flex;
}

<div class="container">
<div class="panel">
<mat-tab-group>
  <mat-tab label="FirstLongText"> Content 1 </mat-tab>
  <mat-tab label="SecondLongText"> Content 2 </mat-tab>
  <mat-tab label="ThirdLongText"> Content 3 </mat-tab>
</mat-tab-group>
</div>
<div class="panel">
  TestText123
</div>
</div>

So shouldn't the material-tab-group shrink when the width of the page decreases and show the navigation arrows in the head-bar? But as you can see the second panel is out of place. So what is wrong here?

score 3 · Accepted Answer · answered Jul 03 '19 at 21:47

this problem has nothing to do with mat-tabs nor flex. the problem here is the elements with .panel class doesn't know how to size themselves. they are in a flex container, but there is no flex or display attribute set on them as well as any sizing attribute. so they fall back to defaults which in this case display: block. since there is no width set on those elements they take as much space as they can as explained here and since they are in a flex container with no flex-direction set, that also causes default behavior which is flex-direction: row. consequently elements with .panel class are displayed in a row and each of them take as much width as they can (which causes them to take the width of their contents). that said; in order to make things nice all you need to do is to tell .panel elements how to size themselves;

.panel {
  padding: 24px;
  border: 1px solid black;
  margin-right: 20px;
  flex: 0 0 50%; /** required to make sure that elements take 50% width no matter whether they can grow or shrink.*/
  width: 50%; /** we are telling elements to size themselves */
  box-sizing: border-box; /** is required to achieve correct size calculations otherwise all those margins/paddings mess things up */
}

here is a working demo https://stackblitz.com/edit/angular-xthdcw-hp4pdg

another solution would be to set flex-direction: column on .container because elements in a flex container with column layout take full width of parent by default. in this case .panel elements know how to size themselves and everything again work just fine.

here is demo for column layout https://stackblitz.com/edit/angular-xthdcw-p6ab2w

Thank you so far, it looks like this is going in the right direction. I left out a few conditions: So what can I do, if I want panel 1 to be as large as possible and panel 2 as small as possible (concerning width of course)? — Carandiru, Jul 04 '19 at 08:23
for that you need to set `flex: 1` and `min-width: 0` on first panel and `min-width: auto` on second panel. see [this post](https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size). here is the [updated demo](https://stackblitz.com/edit/angular-xthdcw-et9yym) — ysf, Jul 04 '19 at 17:58

Material-Tabs not shrinking correctly when using flexbox

1 Answers1