如何拉伸表单的内部内容

Question

我在 Angular 中有一个反应式表单，我想采用完整的可用宽度，当我这样做 width:100% 时，它只会拉伸表单的边框，而不是内部内容，但我希望内部元素拉伸为出色地， 这是我的html

<form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto" name="form" [formGroup]="form">
   <div class="h2 mb-24">Reactive Form Example</div>
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
      <mat-form-field appearance="outline" fxFlex="100">
         <mat-label>Company (disabled)</mat-label>
         <input matInput formControlName="company">
         <mat-icon matSuffix class="disabled-text">domain</mat-icon>
      </mat-form-field>
   </div>
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
      <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
         <mat-label>First name</mat-label>
         <input matInput formControlName="firstName" required>
         <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
         <mat-error>First Name is required!</mat-error>
      </mat-form-field>
      <mat-form-field appearance="outline" fxFlex="50" class="pl-4">
         <mat-label>Last name</mat-label>
         <input matInput formControlName="lastName" required>
         <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
         <mat-error>Last Name is required!</mat-error>
      </mat-form-field>
   </div>
   <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
      <mat-form-field appearance="outline" fxFlex="100">
         <mat-label>Address</mat-label>
         <textarea matInput formControlName="address" required>
              1600 Amphitheatre Pkwy
          </textarea>
         <mat-error>Address is required!</mat-error>
      </mat-form-field>
      <mat-form-field appearance="outline" fxFlex="100">
         <mat-label>Address 2</mat-label>
         <textarea matInput formControlName="address2"></textarea>
         <mat-error>Address 2 is required!</mat-error>
      </mat-form-field>
   </div>
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
      <mat-form-field appearance="outline" fxFlex="33">
         <mat-label>City</mat-label>
         <input matInput formControlName="city" required>
         <mat-icon matSuffix class="secondary-text">location_city</mat-icon>
         <mat-error>City is required!</mat-error>
      </mat-form-field>
      <mat-form-field appearance="outline" fxFlex="34" class="px-8">
         <mat-label>State</mat-label>
         <input matInput formControlName="state" required>
         <mat-icon matSuffix class="secondary-text">location_city</mat-icon>
         <mat-error>State is required!</mat-error>
      </mat-form-field>
      <mat-form-field appearance="outline" fxFlex="33">
         <mat-label>Postal Code</mat-label>
         <input matInput #postalCode value="94043" formControlName="postalCode" maxlength="5" required>
         <mat-icon matSuffix class="secondary-text">markunread_mailbox</mat-icon>
         <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
         <mat-error>Postal Code is required!</mat-error>
      </mat-form-field>
   </div>
   <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
      <mat-form-field appearance="outline" fxFlex="100">
         <mat-label>Country</mat-label>
         <mat-select formControlName="country" required>
            <mat-option [value]="'United States of America'">
               United States of America
            </mat-option>
            <mat-option [value]="'United Kingdom'">
               United Kingdom
            </mat-option>
            <mat-option [value]="'Russia'">
               Russia
            </mat-option>
            <mat-option [value]="'China'">
               China
            </mat-option>
            <mat-option [value]="'Japan'">
               Japan
            </mat-option>
            <mat-option [value]="'Turkey'">
               Turkey
            </mat-option>
         </mat-select>
         <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
         <mat-error>Country is required!</mat-error>
      </mat-form-field>
   </div>
</form>

这是我用来获得所需结果的 css

form {
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    align-content: stretch;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    width: 100%;
}

:host {
    width: 100%;
    .content {
        form {
            width: 100%;
            // max-width: 800px !important;
        }
        .form-errors-model {
            flex: 1;
            code {
                background: none !important;
            }
        }
        .horizontal-stepper-wrapper,
        .vertical-stepper-wrapper {
            max-width: 800px;
        }
    }
}

我已经在下面的链接中包含了这两个结果的图像，看看有什么想法 https://imgur.com/a/AHgS8lw

Answer 1

在对代码进行了大量的折腾之后，我知道我没有在我的应用程序中导入材质模块，