Заморозить <div>вверху экрана, заполнить оставшийся <div>экран и прокрутить

Question

У меня есть приложение Angular 7 (Angular 2, разговорный), которое мне нужно правильно стилизовать.

Есть два тега <div>.Один тег <div> должен отображаться в любом вертикальном пространстве.Никогда не должно быть полосы прокрутки.

Второй <div> должен заполнить оставшийся экран, позволяя пользователю прокручивать то, что не может быть отображено на странице.

Желаемый результаточень похоже на Gmail, где инструменты заблокированы наверху браузера, а входящие - с возможностью прокрутки.

Вот StackBlitz моего игрушечного примера.Поведение прокрутки правильное, но я не могу получить второй div для заполнения оставшегося экрана.

Вот HTML-шаблон компонента:

<div>
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <span>Really Important Stuff</span>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-form-field appearance="outline">
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>

<div class="scroll-container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

А вот CSSЯ подаю заявку на шаблон:

table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

/* I want the scroll container to fill the remaining screen height */
.scroll-container {
  height: 200px;
  overflow: auto;
}

Я не хочу добавлять больше JS-зависимостей в мой проект, если этого можно избежать.Спасибо за вашу помощь.

Answer 1

Используя flexbox, это можно сделать, добавив этот css

body{
  overflow: hidden;
}

table-filtering-example{
  display: flex;
  flex-direction: column;
  max-height: 95vh;
}

.scroll-container {
  overflow: auto;
}

, который вы можете ссылаться на этот разветвленный стек с изменениями https://stackblitz.com/edit/angular-f7dxzo-mqimyr?file=app%2Ftable-filtering-example.css