Расширенная панель из мата / мат-гармошка

Question

Я использую angular и aggrid, и я хотел бы, чтобы моя сетка адаптировалась по высоте в панели расширения mat, чтобы занимать все доступное пространство экрана при открытии. Как я могу это сделать, желательно в css?

Кажется, что аггрид приспосабливается к контейнеру, а коврик расширяется к контенту.

Я также хочу, чтобы текст оранжевого цвета был закреплен в нижней части панели и имел полосу прокрутки только для сетки.

Сделал в помощь плункер: https://plnkr.co/edit/Y0tJ1yoDb5LhDB8a

      <div style="height: 500px; background-color:red; ">
  <mat-accordion multi displayMode="flat" style="margin: 10px;">
   <mat-expansion-panel expanded="true" class="mat-elevation-z1" style="background-color:blue;" >
      <mat-expansion-panel-header>
        <mat-panel-title>Panel 1</mat-panel-title>
      </mat-expansion-panel-header>
      text<br> text<br> text<br> text
    </mat-expansion-panel>
    <mat-expansion-panel expanded="true" class="mat-elevation-z1" style="background-color:green;">
      <mat-expansion-panel-header>
        <mat-panel-title>Panel 2</mat-panel-title>
      </mat-expansion-panel-header>
      text<br> text<br> text<br> text
    </mat-expansion-panel>
    <mat-expansion-panel expanded="true" class="mat-elevation-z1" style="background-color: white;"> 
     <mat-expansion-panel-header>
        <mat-panel-title>Panel aggrid</mat-panel-title>
      </mat-expansion-panel-header>
      <ag-grid-angular
        #agGrid
        style="height:100px"
        id="myGrid"
        class="ag-theme-alpine"
        [modules]="modules"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        (gridReady)="onGridReady($event)"
      ></ag-grid-angular>
      <div style="background-color: orange" >
        This text should always be visible when expanded. aggrid should adapt to content
      </div>
    </mat-expansion-panel>
  </mat-accordion>
 </div>

Спасибо

Answer 1

Что ж, без решения проблемы я наконец-то избежал проблемы с извлечением таблицы сетки расширительной панели коврика. Таким образом, я могу использовать flex css для адаптации к доступному содержимому страницы.

Answer 2

отметьте ниже один, domLayout установлен на autoHeight, упомяните внутри компонента ag-grid