fix(material/select): use flexible overlay dimensions

Author: andrewseguin

src/material/select/select.html

@@ -39,6 +39,7 @@
   [cdkConnectedOverlayOrigin]="_preferredOverlayOrigin || fallbackOverlayOrigin"
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayWidth]="_overlayWidth"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
   (backdropClick)="close()"
   (overlayKeydown)="_handleOverlayKeydown($event)">
   <div

src/material/select/select.ts

@@ -82,7 +82,7 @@ import {
   MatOptionSelectionChange,
 } from '../core';
 import {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '../form-field';
-import {defer, merge, Observable, Subject} from 'rxjs';
+import {defer, merge, Observable, Subject, Subscription} from 'rxjs';
 import {filter, map, startWith, switchMap, take, takeUntil} from 'rxjs/operators';
 import {
   getMatSelectDynamicMultipleError,
@@ -734,6 +734,8 @@ export class MatSelect
     this.panelOpen ? this.close() : this.open();
   }
 
+  _positionChangeSubscription: Subscription;
+
   /** Opens the overlay panel. */
   open(): void {
     if (!this._canOpen()) {
@@ -751,10 +753,17 @@ export class MatSelect
     this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
     this._applyModalPanelOwnership();
     this._panelOpen = true;
-    this._overlayDir.positionChange.pipe(take(1)).subscribe(() => {
+    this._overlayDir.positionChange.pipe(take(1)).subscribe(arg => {
       this._changeDetectorRef.detectChanges();
       this._positioningSettled();
     });
+    if (this._positionChangeSubscription) {
+      this._positionChangeSubscription.unsubscribe();
+    }
+    this._positionChangeSubscription = this._overlayDir.positionChange.subscribe(change => {
+      // debugger;
+      console.log(this._overlayDir);
+    });
     this._overlayDir.attachOverlay();
     this._keyManager.withHorizontalOrientation(null);
     this._highlightCorrectOption();