Material Angular Accordion header/title height

As of today with Material 7.0.2, If you want to have the header follow some generic height:auto rule, this fix height might not be your solution. (for instance to follow the size of the text in the header in responsive situations)

in these situations, it's much better to have an auto height defined in css:

  mat-expansion-panel {
    mat-expansion-panel-header {
      height: auto!important; 
    }
  }

and define

  <mat-expansion-panel-header collapsedHeight="*" expandedHeight="*">

as explained in https://github.com/angular/material2/pull/9313

That's what workerd for me, no css simply adding thowe to mat-expansion-panel-header

<mat-expansion-panel-header [collapsedHeight]="'auto'" [expandedHeight]="'auto'">

You dont have to use ::ng-deep. You can use [collapsedHeight] and [expandedHeight] on your mat-expansion-panel-header.

<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
    <mat-expansion-panel #panel1 [hideToggle]="hideToggle">
        <mat-expansion-panel-header [collapsedHeight]="'190px'" [expandedHeight]="'190px'">
            Section 1
        </mat-expansion-panel-header>
        <p>This is the content text that makes sense here.</p>
    </mat-expansion-panel>
</mat-accordion>

Link to StackBlitz Demo.