fix(dialog): dialogs that hit max-width not centered on IE

Fixes dialogs that hit their `max-width` no longer being centered in IE11. This seems like a regression introduced after 57f19cd.

Author: crisbeto

src/cdk/overlay/_overlay.scss

@@ -39,6 +39,9 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     display: flex;
     position: absolute;
     z-index: $cdk-z-index-overlay;
+
+    // Fixes issues where overlays are centered on IE when they hit the max-width.
+    flex-direction: column;
   }
 
   // A single overlay pane.

src/cdk/overlay/position/global-position-strategy.spec.ts

@@ -29,8 +29,8 @@ describe('GlobalPositonStrategy', () => {
     expect(elementStyle.marginBottom).toBe('');
     expect(elementStyle.marginRight).toBe('');
 
-    expect(parentStyle.justifyContent).toBe('flex-start');
     expect(parentStyle.alignItems).toBe('flex-start');
+    expect(parentStyle.justifyContent).toBe('flex-start');
   });
 
   it('should position the element to the (bottom, right) with an offset', () => {
@@ -44,8 +44,8 @@ describe('GlobalPositonStrategy', () => {
     expect(elementStyle.marginBottom).toBe('70px');
     expect(elementStyle.marginRight).toBe('15em');
 
-    expect(parentStyle.justifyContent).toBe('flex-end');
     expect(parentStyle.alignItems).toBe('flex-end');
+    expect(parentStyle.justifyContent).toBe('flex-end');
   });
 
   it('should overwrite previously applied positioning', () => {
@@ -60,8 +60,8 @@ describe('GlobalPositonStrategy', () => {
     expect(elementStyle.marginBottom).toBe('');
     expect(elementStyle.marginRight).toBe('');
 
-    expect(parentStyle.justifyContent).toBe('flex-start');
     expect(parentStyle.alignItems).toBe('flex-start');
+    expect(parentStyle.justifyContent).toBe('flex-start');
 
     strategy.bottom('70px').right('15em').apply();
 
@@ -70,17 +70,17 @@ describe('GlobalPositonStrategy', () => {
     expect(element.style.marginBottom).toBe('70px');
     expect(element.style.marginRight).toBe('15em');
 
-    expect(parentStyle.justifyContent).toBe('flex-end');
     expect(parentStyle.alignItems).toBe('flex-end');
+    expect(parentStyle.justifyContent).toBe('flex-end');
   });
 
   it('should center the element', () => {
     strategy.centerHorizontally().centerVertically().apply();
 
     let parentStyle = (element.parentNode as HTMLElement).style;
 
-    expect(parentStyle.justifyContent).toBe('center');
     expect(parentStyle.alignItems).toBe('center');
+    expect(parentStyle.justifyContent).toBe('center');
   });
 
   it('should center the element with an offset', () => {
@@ -92,8 +92,8 @@ describe('GlobalPositonStrategy', () => {
     expect(elementStyle.marginLeft).toBe('10px');
     expect(elementStyle.marginTop).toBe('15px');
 
-    expect(parentStyle.justifyContent).toBe('center');
     expect(parentStyle.alignItems).toBe('center');
+    expect(parentStyle.justifyContent).toBe('center');
   });
 
   it('should make the element position: static', () => {
@@ -137,13 +137,13 @@ describe('GlobalPositonStrategy', () => {
     strategy.centerHorizontally().width('100%').apply();
 
     expect(element.style.marginLeft).toBe('0px');
-    expect((element.parentNode as HTMLElement).style.justifyContent).toBe('flex-start');
+    expect((element.parentNode as HTMLElement).style.alignItems).toBe('flex-start');
   });
 
   it('should reset the vertical position and offset when the height is 100%', () => {
     strategy.centerVertically().height('100%').apply();
 
     expect(element.style.marginTop).toBe('0px');
-    expect((element.parentNode as HTMLElement).style.alignItems).toBe('flex-start');
+    expect((element.parentNode as HTMLElement).style.justifyContent).toBe('flex-start');
   });
 });

src/cdk/overlay/position/global-position-strategy.ts

@@ -44,7 +44,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
   top(value: string = ''): this {
     this._bottomOffset = '';
     this._topOffset = value;
-    this._alignItems = 'flex-start';
+    this._justifyContent = 'flex-start';
     return this;
   }
 
@@ -55,7 +55,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
   left(value: string = ''): this {
     this._rightOffset = '';
     this._leftOffset = value;
-    this._justifyContent = 'flex-start';
+    this._alignItems = 'flex-start';
     return this;
   }
 
@@ -66,7 +66,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
   bottom(value: string = ''): this {
     this._topOffset = '';
     this._bottomOffset = value;
-    this._alignItems = 'flex-end';
+    this._justifyContent = 'flex-end';
     return this;
   }
 
@@ -77,7 +77,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
   right(value: string = ''): this {
     this._leftOffset = '';
     this._rightOffset = value;
-    this._justifyContent = 'flex-end';
+    this._alignItems = 'flex-end';
     return this;
   }
 
@@ -121,7 +121,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
    */
   centerHorizontally(offset: string = ''): this {
     this.left(offset);
-    this._justifyContent = 'center';
+    this._alignItems = 'center';
     return this;
   }
 
@@ -133,7 +133,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
    */
   centerVertically(offset: string = ''): this {
     this.top(offset);
-    this._alignItems = 'center';
+    this._justifyContent = 'center';
     return this;
   }