diff --git a/src/dev-app/mdc-input/mdc-input-demo.html b/src/dev-app/mdc-input/mdc-input-demo.html
index 81a1434ed024..b5e8067ad19d 100644
--- a/src/dev-app/mdc-input/mdc-input-demo.html
+++ b/src/dev-app/mdc-input/mdc-input-demo.html
@@ -637,23 +637,27 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Autocomplete</mat-toolbar>
   <mat-card-content>
-    <mat-form-field class="demo-block">
-      <mat-label>Pick Number</mat-label>
-      <input type="text" aria-label="Number" matInput
-             [matAutocomplete]="autoComplete1">
-      <mat-autocomplete #autoComplete1="matAutocomplete">
-        <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
+    <p>
+      <mat-form-field>
+        <mat-label>Pick Number</mat-label>
+        <input type="text" aria-label="Number" matInput
+               [matAutocomplete]="autoComplete1">
+        <mat-autocomplete #autoComplete1="matAutocomplete">
+          <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </p>
 
-    <mat-form-field appearance="outline" class="demo-block">
-      <mat-label>Pick Number</mat-label>
-      <input type="text" aria-label="Number" matInput
-             [matAutocomplete]="autoComplete2">
-      <mat-autocomplete #autoComplete2="matAutocomplete">
-        <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
+    <p>
+      <mat-form-field appearance="outline">
+        <mat-label>Pick Number</mat-label>
+        <input type="text" aria-label="Number" matInput
+               [matAutocomplete]="autoComplete2">
+        <mat-autocomplete #autoComplete2="matAutocomplete">
+          <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </p>
   </mat-card-content>
 </mat-card>
 
diff --git a/src/material-experimental/mdc-form-field/form-field.scss b/src/material-experimental/mdc-form-field/form-field.scss
index 18cc1c7e6c61..1168a93f51d1 100644
--- a/src/material-experimental/mdc-form-field/form-field.scss
+++ b/src/material-experimental/mdc-form-field/form-field.scss
@@ -38,6 +38,12 @@
   width: 100%;
 }
 
+// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
+// This allows developers to control the width without needing custom CSS overrides.
+.mat-mdc-text-field-wrapper {
+  width: 100%;
+}
+
 // Infix that contains the projected content (usually an input or a textarea). We ensure
 // that the projected form-field control and content can stretch as needed, but we also
 // apply a default infix width to make the form-field's look natural.