fix(material-experimental/mdc-snack-bar): not aligned correctly on IE11 (#20690)

crisbeto · mmalerba · commit e1ea7df666a0 · 2020-09-30T14:03:18.000-07:00
We were hitting a flexbox bug that was causing the snack bar container to collapse on IE11, shifting it off-center when using the `center` alignment and pushing it completely off-screen in the `end` alignment. (cherry picked from commit c9fcbef)
diff --git a/src/material-experimental/mdc-snack-bar/snack-bar-container.scss b/src/material-experimental/mdc-snack-bar/snack-bar-container.scss
@@ -16,6 +16,10 @@
 }
 
 // These elements need to have full width using flex layout.
-.mat-mdc-snack-bar-handset, .mat-mdc-snack-bar-container, .mat-mdc-snack-bar-label {
-  flex: 1;
+.mat-mdc-snack-bar-handset,
+.mat-mdc-snack-bar-container,
+.mat-mdc-snack-bar-label {
+  // Note that we need to include the full `flex` shorthand
+  // declaration so the container doesn't collapse on IE11.
+  flex: 1 0 auto;
 }

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,10 @@`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`// These elements need to have full width using flex layout.`
`19`		`-.mat-mdc-snack-bar-handset, .mat-mdc-snack-bar-container, .mat-mdc-snack-bar-label {`
`20`		`- flex: 1;`
	`19`	`+.mat-mdc-snack-bar-handset,`
	`20`	`+.mat-mdc-snack-bar-container,`
	`21`	`+.mat-mdc-snack-bar-label {`
	`22`	+ // Note that we need to include the full `flex` shorthand
	`23`	`+ // declaration so the container doesn't collapse on IE11.`
	`24`	`+ flex: 1 0 auto;`
`21`	`25`	`}`