Я добавил атрибут resize к этому простому расширению циновки, взятому с сайта Material. Но как только вы измените размеры панели по вертикали и попытаетесь закрыть панель расширения, она скрывает содержимое, но не закрывает расширение. как вы это исправите. Вот пример стека блиц: https://stackblitz.com/edit/angular-kywskk?file=styles.css и картинка для лучшего объяснения:
HTML
<mat-expansion-panel class="re-size" [expanded] = "true">
<mat-expansion-panel-header>
<mat-panel-title>
Personal data
</mat-panel-title>
<mat-panel-description>
Type your name and age
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age">
</mat-form-field>
CSS
.re-size{
margin: 15px !important;
resize: both;
overflow: hidden;
}