Fixing IE11 flexbox alignment when min-width is set (#9196)

* Fixing IE11 flexbox alignment when min-width is set

For more info on the fix please see philipwalton/flexbugs#231

* Updating the IE11 alignment fix

Updating the fix to use philipwalton/flexbugs#231 (comment) approach for cases with larger cover image text.

* Documenting the code

* chore: Tweak code style

* Add display: block, remove Github ticket mention.

* Ignore the IE11 cover image fix in browsers that support flex.

* Add a better description of the IE fix.

* Fix typo.

packages/block-library/src/cover/style.scss

@@ -96,6 +96,20 @@
 		width: 100%;
 	}
 
+	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
+	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
+	&::after {
+		display: block;
+		content: "";
+		font-size: 0;
+		min-height: inherit;
+
+		// IE doesn't support flex so omit that.
+		@supports (position: sticky) {
+			content: none;
+		}
+	}
+
 	// Aligned cover blocks should not use our global alignment rules
 	&.aligncenter,
 	&.alignleft,