title: having trouble formatting mat-expansion panel
body: <p>My expansion panel is not filling the entire width of the container, even when I set the width to 100%. Any ideas how to get it to fill the available space? I tried creating a stackblitz. I can't figure out why nothing is displaying <a href="https://angular-hikqnf.stackblitz.io" rel="nofollow noreferrer">https://angular-hikqnf.stackblitz.io</a>
  my ts file</p>
  <pre><code>import {Component, OnInit, ChangeDetectionStrategy, OnDestroy, ViewChild} from '@angular/core';
  import {AngularFirestore} from &quot;@angular/fire/firestore&quot;;
  import {catchError, map, tap} from &quot;rxjs/operators&quot;;
  import {of} from &quot;rxjs&quot;;
  import {MatAccordion} from &quot;@angular/material/expansion&quot;;
  
  @Component({
    templateUrl: './vaccine-codes.component.html',
    styleUrls: ['./vaccine-codes.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class VaccineCodesComponent implements OnInit, OnDestroy {
    @ViewChild(MatAccordion) accordion: MatAccordion;
  
    panelOpenState = false;
      configurations$ = this.afs.collection&lt;Vaccine[]&gt;('configurations').doc('CVXCODES').valueChanges()
      .pipe(tap(console.log));
    dtp$ = this.configurations$.pipe(map((data: Vaccine[]) =&gt; {
      data?.find((v: Vaccine) =&gt; v.Codes?.includes('dtp'))
    }),
      catchError(err =&gt; {
        console.error(&quot;dtp$&quot;, err);
        return of([]);
      }));
  
    constructor(private afs: AngularFirestore) {
  
    }
  
      ngOnInit(): void {
  
    }
    ngOnDestroy() {
    }
    async getConf() {
      try {
        const configurations = await this.afs.collection&lt;Configuration&gt;('configurations').doc('CVXCODES').get().toPromise();
      } catch (e) {
        console.error(&quot;getConf error&quot;, e)
      }
    }
  
  }
  
  export interface Configuration {
    ChpPrefix: string;
    Vaccines: { [key: string]: Vaccine[] };
    description: string;
  
  }
  
  export interface Vaccine {
    Codes: string[] | null;
  }
  
  </code></pre>
  <p>my template</p>
  <pre><code>  &lt;mat-accordion class=&quot;align&quot;&gt;
  &lt;ng-container *ngIf=&quot;configurations$ | async as configurations&quot; hideToggle&gt;
      &lt;mat-expansion-panel *ngFor=&quot;let item of configurations | keyvalue&quot;&gt;
        &lt;mat-expansion-panel-header&gt;
          &lt;div &gt;
  &lt;!--          &lt;pre&gt;{{configurations | json}}&lt;/pre&gt;--&gt;
            &lt;div fxLayout=&quot;row&quot;  fxLayoutAlign=&quot;space-between&quot;&gt;
              &lt;mat-panel-title class=&quot;name&quot; fxFlex=&quot;30%&quot; &gt;
                Name of Vaccine: {{item.key}}
              &lt;/mat-panel-title&gt;
              &lt;mat-panel-title class=&quot;description&quot; fxFlex=&quot;70%&quot;&gt;
                Description: {{item.value.description}}
              &lt;/mat-panel-title&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/mat-expansion-panel-header&gt;
        &lt;p&gt;This is the primary content of the panel.&lt;/p&gt;
  
      &lt;/mat-expansion-panel&gt;
      &lt;mat-expansion-panel (opened)=&quot;panelOpenState = true&quot;
                           (closed)=&quot;panelOpenState = false&quot;&gt;
      &lt;/mat-expansion-panel&gt;
  &lt;/ng-container&gt;
    &lt;/mat-accordion&gt;
  </code></pre>
  <p>my scss file</p>
  <pre><code>
  .mat-expansion-panel {
    width: 100%;
    min-height: 60px;
  
  }
  
  sounds so simple but nothing I have tried works.
  
  
  </code></pre>