Вкладки угловых материалов с фиксированным заголовком вкладок и фиксированным делением содержимого

Question

Попытка сделать это:

И хотя у меня был некоторый успех с исправлением строки заголовка вкладки, я просто не могу получитьdiv с кнопками также остается фиксированным (я думаю, потому что это часть содержимого вкладки, а не заголовка вкладки)

Есть мысли / решения? Я начинаю думать, что угловые вкладки материала не будут работать для моего пользовательского интерфейса. Можно ли вручную создать визуализированный HTML-код для вкладок и переместить кнопку div панели инструментов в контейнер заголовка вкладки?

https://stackblitz.com/angular/mkdpjkxlemv

Answer 1

Оберните содержимое под фиксированным заголовком в div

<div class="header">
    <button mat-raised-button>Button 1</button>
    <button mat-raised-button>Button 2</button>
</div>
<div class="content">
     Content
</div>

Присвойте ему фиксированную высоту, как вам нужно, затем установите overflow в auto

.content{
  height: 40vh;
  overflow: auto;
  padding: 1em;
}

Вот полностью рабочий пример . Надеюсь, это поможет.