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

crisbeto · crisbeto · commit 6822b556ae26 · 2020-09-30T15:04:00.000+03: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.
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,11 @@
 }
 
 // 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 {
+  // We use the individual properties, instead of the
+  // shorthand `flex`, because of some layout issues on IE11.
+  flex-grow: 1;
+  flex-shrink: 0;
 }

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,11 @@`
`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`	`+ // We use the individual properties, instead of the`
	`23`	+ // shorthand `flex`, because of some layout issues on IE11.
	`24`	`+ flex-grow: 1;`
	`25`	`+ flex-shrink: 0;`
`21`	`26`	`}`