Материал-вкладки не сжимаются правильно при использовании flexbox

Question

В моем приложении вкладки материала не сжимаются правильно, когда ширина страницы уменьшается при использовании flexbox.

Мне удалось повторить проблему здесь: https://stackblitz.com/edit/angular-xthdcw

Код:

.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>

Так не должна ли группа вкладок материала уменьшаться при уменьшении ширины страницы и показывать стрелки навигации на панели заголовка?Но, как вы можете видеть, вторая панель не на своем месте.Так что тут не так?

Answer 1

эта проблема не имеет никакого отношения ни к мат-вкладкам, ни к флексам. проблема здесь в том, что элементы с классом .panel не знают, как их масштабировать. они находятся в гибком контейнере, но для них не установлен атрибут flex или display, а также атрибут определения размера. поэтому они возвращаются к значениям по умолчанию, которые в этом случае display: block. поскольку для этих элементов не установлено width, они занимают столько места, сколько могут , как описано здесь , и поскольку они находятся в гибком контейнере без установленного flex-direction, это также вызывает поведение по умолчанию, которое flex-direction: row. следовательно, элементы с классом .panel отображаются в строке, и каждый из них занимает столько ширины, сколько может (что заставляет их принимать ширину их содержимого). что сказал; для того, чтобы все было хорошо, все, что вам нужно сделать, это рассказать .panel элементам, как их размер;

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

вот рабочая демоверсия https://stackblitz.com/edit/angular-xthdcw-hp4pdg

другим решением было бы установить flex-direction: column на .container, поскольку элементы в гибком контейнере с разметкой столбцов по умолчанию принимают всю ширину родительского элемента. в этом случае .panel элементы знают, как их масштабировать, и все снова работает просто отлично.

здесь приведена демонстрация для размещения столбцов https://stackblitz.com/edit/angular-xthdcw-p6ab2w