From 7e1497ddb8570a300cb2ba1a84cc37b278aeab20 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Fri, 26 May 2017 12:41:07 -0700
Subject: [PATCH] Revert simplified grid column styles from #22376
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 scss/mixins/_grid.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 87920e284f..b6d9805777 100644
--- 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) {