title: mat-autocomplete should expand MatDialog
body: <p><a href="https://i.stack.imgur.com/UuUjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UuUjs.png" alt="enter image description here"></a></p>
  
  <p>I would like my mat-autocomplete to expand the dialog it is in as opposed to overflowing. Is there any way I can achieve that?</p>
  
  <p>Here my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="label-modal"&gt;
  
    &lt;h1 mat-dialog-title&gt;Add label&lt;/h1&gt;
    
    &lt;div mat-dialog-content&gt;
  
      &lt;form class="example-form"&gt;
  
        &lt;mat-form-field class="example-full-width"&gt;
  
          &lt;input type="text" matInput [matAutocomplete]="auto" [formControl]="myControl"&gt;
  
          &lt;mat-autocomplete #auto="matAutocomplete"&gt;
            &lt;mat-option (click)="onLabelClick(option)" *ngFor="let option of filteredOptions | async" [value]="option"&gt;
              {{option}}
            &lt;/mat-option&gt;
          &lt;/mat-autocomplete&gt;
        &lt;/mat-form-field&gt;
  
      &lt;/form&gt;
  
      &lt;div id="selectedLabelBox"&gt;
        &lt;span *ngFor="let label of selectedLabels"&gt;{{label}}&lt;/span&gt;
      &lt;/div&gt;
  
  
      &lt;h5 id="labelBoxTitle" class="modal-title"&gt;Popular labels&lt;/h5&gt;
  
      &lt;div id="labelBox"&gt;
        &lt;span *ngFor="let label of popularLabels" (click)="onPopularLabelClick(label)"&gt;{{label}}&lt;/span&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>