angular 5 material - form fields stuck at 180px

Just like Jonesie said, this behavior is related to View Encapsulation. In this context .mat-form-field-infix takes 180px as default value probably beacause of this. The auto value lets the browser calculates the width instead of puting hardcoded value. The !important declarations forces the style override for this.
I am using !important since it complies with the rules for the use of this property. See docs

::ng-deep .mat-form-field-infix {
    width: auto !important;
}

can you try using

mat-form-field {
width: 100%;
}

I had the same issue in a mat-card, this worked for me.

Seems like it's something to do with View Encapsulation. This thread explains it: https://github.com/angular/material2/issues/4034 but changing encapsulation for the component causes all sorts of compile failures.

This article gave me the correct solution:https://material.angular.io/guide/customizing-component-styles

I'll move my style to global scope...

.formFieldWidth480 .mat-form-field-infix {
   width: 480px;
}

and in the component that opens the dialog:

this.newDialog = this.dialog.open(NewDialogComponent,
  {
    width: '650px', height: '550px',
    data : newThing,
    panelClass : "formFieldWidth480"
  });

I hope this saves someone else the day I lost...