Angular Вкладки материалов: как сделать так, чтобы FLEX подходил, не переполнял

Question

, так что это демонстрация stackblitz https://stackblitz.com/edit/angular-wg8jkx

Я пытаюсь добиться нормального заголовка, где у меня есть h1 заголовок (слева) вкладки (доступная ширина) панель инструментов (для право ...

так что у меня есть этот стиль ... цитата прямо:

.page-header {
  display: flex;

  .page-title {
    flex: 0 0 auto;
  }

  .page-tabs {
    flex: 1 0 auto;
  }

  .page-toolbar {
    flex: 0 0 auto;
  }
}

и, на мой взгляд, я добавляю вкладки на лету с чем-то вроде этого

<nav #tabNav mat-tab-nav-bar color="accent">
  <a mat-tab-link *ngFor="let tab of tabs">
    {{ tab }}
  </a>
</nav>

Переполнение вкладок при добавлении достаточного количества вкладок .... что нужно показать, это кнопки <и> (разбиение на страницы вкладок) ...

как мне добиться этого динамически?

Answer 1

Это можно сделать, указав следующие css правила:

.page-tabs {
  flex: 1;
  overflow-x: hidden;
}

flex: 1 - это сокращение для flex: 1 1 0%. Ключевым моментом здесь является установка flex-grow и flex-shrink на 1.

Только после этого overflow-x: hidden может сделать волхвов c.

Разветвленный стекблиц