Revert simplified grid column styles from #22376

The premise for #22376 was that if we removed the `max-width` and `flex` properties, we could use the column classes as `width` utilities. The problem that I didn't remember at the time is that column classes have horizontal `padding` on them. This doesn't work for setting `width`. Perhaps more importantly, this causes #22649—the automatic sizing of columns is broken with the absence of `flex` styles.

/cc @sachinsinghi

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 87920e284fe516698d12cd62f1d6bd6396721ef6..b6d9805777052fe95ee82effafaf572450b3b9e4 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -67,7 +67,11 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  width: percentage($size / $columns);
+  flex: 0 0 percentage($size / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($size / $columns);
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {