From 5a9b506ef01d2c4ff77608ba634df7632894a211 Mon Sep 17 00:00:00 2001
From: Simon Smith <simonsmith@users.noreply.github.com>
Date: Tue, 7 Nov 2017 19:18:12 +0000
Subject: [PATCH] Fix u-sizeFit overriding responsive versions

Fixes #39
---
 lib/size-lg.css |  1 +
 lib/size-md.css |  1 +
 lib/size-sm.css |  1 +
 test/index.html | 24 ++++++++++++++++++++++++
 4 files changed, 27 insertions(+)

diff --git a/lib/size-lg.css b/lib/size-lg.css
index ffba3ae..98d480b 100644
--- a/lib/size-lg.css
+++ b/lib/size-lg.css
@@ -160,6 +160,7 @@
 
   .u-lg-sizeFit {
     flex-basis: auto !important;
+    width: auto !important;
   }
 
   /**
diff --git a/lib/size-md.css b/lib/size-md.css
index 392ee85..eac8d7f 100644
--- a/lib/size-md.css
+++ b/lib/size-md.css
@@ -162,6 +162,7 @@
 
   .u-md-sizeFit {
     flex-basis: auto !important;
+    width: auto !important;
   }
 
   /**
diff --git a/lib/size-sm.css b/lib/size-sm.css
index dd8850c..c5485a2 100644
--- a/lib/size-sm.css
+++ b/lib/size-sm.css
@@ -160,6 +160,7 @@
 
   .u-sm-sizeFit {
     flex-basis: auto !important;
+    width: auto !important;
   }
 
   /**
diff --git a/test/index.html b/test/index.html
index 6a70f23..be273b1 100644
--- a/test/index.html
+++ b/test/index.html
@@ -49,6 +49,30 @@ <h3 class="Test-it">shrink-wraps (on left) / fills remaining space</h3>
     </div>
   </div>
 
+  <h2 class="Test-describe">.u-[size]-sizeFit</h2>
+  <h3 class="Test-it">overrides u-sizeFit correctly</h3>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="u-size1of2 u-sm-sizeFit u-highlight">
+        should sizeFit at sm-viewport
+      </div>
+    </div>
+  </div>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="u-size1of2 u-md-sizeFit u-highlight">
+        should sizeFit at md-viewport
+      </div>
+    </div>
+  </div>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="u-size1of2 u-lg-sizeFit u-highlight">
+        should sizeFit at lg-viewport
+      </div>
+    </div>
+  </div>
+
   <h2 class="Test-describe">.u-sizeFill</h2>
   <h3 class="Test-it">distributes space evenly</h3>
   <div class="Test-run" style="margin-bottom: 15px">