Angular Flex布局：如何将窗体的宽度设置为父容器？

Question

以下代码中的表格显示不正确。我希望它填充整个容器（我相信这是Angular flex布局通常所做的事情），但是，它只能填充整个容器的三分之一。

我尝试将“ size：100％”应用于form，div和mat-form-field，但是这些方法均无效。

<div class="container"
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="20px" 
fxLayoutGap.xs="0">

<div fxFlex *ngIf="dish">
  ...
</div>

<div fxFlex *ngIf="dish">
    <h3>
      <b>Comments</b>
    </h3>
    <mat-list *ngIf="dish.comments">
        <mat-list-item *ngFor="let comment of dish.comments">
          <p matline>
          <span>{{comment.comment}}<br></span>
          <span>{{comment.rating}} Stars<br></span>
          <span>-- {{comment.author}} {{comment.date | date}}</span>
          </p>
      </mat-list-item>
    </mat-list>

    <form novalidate #fform="ngForm" [formGroup]="commentForm" (ngSubmit)="onSubmit()">
    <p>
      <mat-form-field>
        <input matInput formControlName="name" placeholder="name" type="text" required>
        <mat-error *ngIf="formErrors.name">{{formErrors.name}}</mat-error>
      </mat-form-field>
    </p>
    <p>
      <mat-slider thumbLabel tickInterval="1" min="0" max="5"></mat-slider>
    </p>
    <p>
      <mat-form-field>
        <textarea matInput formControlName="comment" placeholder="comment" rows=8 required></textarea>
        <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>
      </mat-form-field>
    </p>
      <button type="submit" mat-button class="background-primary text-floral-white">Submit</button>
  </form>
</div>

<div [hidden]="dish">
  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
</div>

</div>