fix(select): Fixes width-issue of select option panel in IE

src/demo-app/select/select-demo.html

@@ -6,7 +6,8 @@
   <mat-card>
     <mat-card-subtitle>ngModel</mat-card-subtitle>
 
-    <mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme">
+    <mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme"
+                    [class.demo-drinks-width-large]="drinksWidth === '400px'">
       <mat-label>Drink</mat-label>
       <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
         [disabled]="drinksDisabled" #drinkControl="ngModel">
@@ -31,6 +32,13 @@
         <option value="never">Never</option>
       </select>
     </p>
+    <p>
+      <label for="drinks-width">Width:</label>
+      <select [(ngModel)]="drinksWidth" id="drinks-width">
+        <option value="default">Default</option>
+        <option value="400px">400px</option>
+      </select>
+    </p>
     <p>
       <label for="drinks-theme">Theme:</label>
       <select [(ngModel)]="drinksTheme" id="drinks-theme">

src/demo-app/select/select-demo.scss

@@ -11,4 +11,8 @@
     vertical-align: bottom;
     padding-right: 0.25em;
   }
+
+  .demo-drinks-width-large {
+    width: 400px;
+  }
 }

src/demo-app/select/select-demo.ts

@@ -31,6 +31,7 @@ export class SelectDemo {
   currentDigimon: string;
   latestChangeEvent: MatSelectChange;
   floatLabel = 'auto';
+  drinksWidth = 'default';
   foodControl = new FormControl('pizza-1');
   topHeightCtrl = new FormControl(0);
   drinksTheme = 'primary';

src/lib/select/select.html

@@ -29,23 +29,24 @@
   (backdropClick)="close()"
   (attach)="_onAttached()"
   (detach)="close()">
-
-  <div
-    #panel
-    class="mat-select-panel {{ _getPanelTheme() }}"
-    [ngClass]="panelClass"
-    [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
-    (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
-    [style.transformOrigin]="_transformOrigin"
-    [class.mat-select-panel-done-animating]="_panelDoneAnimating"
-    [style.font-size.px]="_triggerFontSize"
-    (keydown)="_handleKeydown($event)">
-
+  <div class="mat-select-panel-wrap">
     <div
-      class="mat-select-content"
-      [@fadeInContent]="'showing'"
-      (@fadeInContent.done)="_onFadeInDone()">
-      <ng-content></ng-content>
+      #panel
+      class="mat-select-panel {{ _getPanelTheme() }}"
+      [ngClass]="panelClass"
+      [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
+      (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
+      [style.transformOrigin]="_transformOrigin"
+      [class.mat-select-panel-done-animating]="_panelDoneAnimating"
+      [style.font-size.px]="_triggerFontSize"
+      (keydown)="_handleKeydown($event)">
+
+      <div
+        class="mat-select-content"
+        [@fadeInContent]="'showing'"
+        (@fadeInContent.done)="_onFadeInDone()">
+        <ng-content></ng-content>
+      </div>
     </div>
   </div>
 </ng-template>

src/lib/select/select.scss

@@ -67,6 +67,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   margin: 0 $mat-select-arrow-margin;
 }
 
+.mat-select-panel-wrap {
+  // Prevents width-issues of mat-select-panel with width: calc(100% + 32px)
+  // in IE11 due to the parents display: flex;
+  flex-basis: 100%;
+}
+
 .mat-select-panel {
   @include mat-menu-base(8);
   padding-top: 0;

src/lib/select/select.spec.ts

@@ -910,6 +910,29 @@ describe('MatSelect', () => {
 
         const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
         expect(pane.style.minWidth).toBe('200px');
+
+        const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel');
+        const scrollContainerWidth = scrollContainer!.getBoundingClientRect().width;
+        expect(scrollContainerWidth).toBeCloseTo(200 + 32, 0,
+            'Expected select panel width to be 100% + 32px of the select field trigger');
+      }));
+
+      it('should set the width of the overlay based on a larger trigger width',
+        fakeAsync(() => {
+            // the trigger width exceeds the minimum width of the mat-select-panel
+          trigger.style.width = '400px';
+
+          trigger.click();
+          fixture.detectChanges();
+          flush();
+
+          const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+          expect(pane.style.minWidth).toBe('400px');
+
+          const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel');
+          const scrollContainerWidth = scrollContainer!.getBoundingClientRect().width;
+          expect(scrollContainerWidth).toBeCloseTo(400 + 32, 0,
+              'Expected select panel width to be 100% + 32px of the select field trigger');
       }));
 
       it('should not attempt to open a select that does not have any options', fakeAsync(() => {
@@ -3002,6 +3025,7 @@ describe('MatSelect', () => {
 
         checkTriggerAlignedWithOption(7, groupFixture.componentInstance.select);
       }));
+
     });
 
     describe('limited space to open vertically', () => {