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

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

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

@@ -42,8 +42,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', () => {
@@ -57,8 +57,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', () => {
@@ -73,8 +73,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();
 
@@ -83,8 +83,8 @@ 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', () => {
@@ -92,8 +92,8 @@ describe('GlobalPositonStrategy', () => {
 
     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', () => {
@@ -105,8 +105,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', () => {
@@ -150,14 +150,14 @@ 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');
   });
 
   it('should not throw when attempting to apply after the overlay has been disposed', () => {

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

@@ -46,7 +46,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;
   }
 
@@ -57,7 +57,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;
   }
 
@@ -68,7 +68,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;
   }
 
@@ -79,7 +79,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;
   }
 
@@ -123,7 +123,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
    */
   centerHorizontally(offset: string = ''): this {
     this.left(offset);
-    this._justifyContent = 'center';
+    this._alignItems = 'center';
     return this;
   }
 
@@ -135,7 +135,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
    */
   centerVertically(offset: string = ''): this {
     this.top(offset);
-    this._alignItems = 'center';
+    this._justifyContent = 'center';
     return this;
   }