Reintroduce sizeFillAlt using flex-basis: auto

simonsmith · simonsmith · commit 78e8f4528dd8 · 2015-11-15T15:20:12.000Z
diff --git a/lib/size-lg.css b/lib/size-lg.css
@@ -20,6 +20,18 @@
     flex-basis: 0% !important; /* 2 */
   }
 
+  /**
+   * An alternative method to make an element fill the remaining space.
+   * Distributes space based on the initial width and height of the element
+   *
+   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
+   */
+
+  .u-lg-sizeFillAlt {
+    flex: 1 1 auto !important;
+    flex-basis: auto !important;
+  }
+
   /**
    * Make an element the width of its parent.
    */
diff --git a/lib/size-md.css b/lib/size-md.css
@@ -20,6 +20,18 @@
     flex-basis: 0% !important; /* 2 */
   }
 
+  /**
+   * An alternative method to make an element fill the remaining space.
+   * Distributes space based on the initial width and height of the element
+   *
+   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
+   */
+
+  .u-md-sizeFillAlt {
+    flex: 1 1 auto !important;
+    flex-basis: auto !important;
+  }
+
   /**
    * Make an element the width of its parent.
    */
diff --git a/lib/size-sm.css b/lib/size-sm.css
@@ -20,6 +20,18 @@
     flex-basis: 0% !important; /* 2 */
   }
 
+  /**
+   * An alternative method to make an element fill the remaining space.
+   * Distributes space based on the initial width and height of the element
+   *
+   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
+   */
+
+  .u-sm-sizeFillAlt {
+    flex: 1 1 auto !important;
+    flex-basis: auto !important;
+  }
+
   /**
    * Make an element the width of its parent.
    */
diff --git a/lib/size.css b/lib/size.css
@@ -19,6 +19,18 @@
   flex-basis: 0% !important; /* 2 */
 }
 
+/**
+ * An alternative method to make an element fill the remaining space.
+ * Distributes space based on the initial width and height of the element
+ *
+ * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
+ */
+
+.u-sizeFillAlt {
+  flex: 1 1 auto !important;
+  flex-basis: auto !important;
+}
+
 /**
  * Make an element the width of its parent.
  */
diff --git a/test/index.html b/test/index.html
@@ -32,7 +32,7 @@
 <div class="Test">
   <h1 class="Test-title">SUIT CSS: <a href="https://github.com/suitcss/utils-size">sizing utility</a> tests</h1>
 
-  <h2 class="Test-describe">.u-sizeFill</h2>
+  <h2 class="Test-describe">.u-sizeFill / .u-sizeFillAlt</h2>
   <h3 class="Test-it">fills remaining space</h3>
   <div class="Test-run">
     <div class="u-flex">
@@ -75,6 +75,38 @@ <h3 class="Test-it">distributes space evenly</h3>
     </div>
   </div>
 
+  <h2 class="Test-describe">.u-sizeFillAlt</h2>
+  <h3 class="Test-it">distributes space based on initial width of item</h3>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="u-sizeFillAlt u-highlight">
+        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
+        aliquip nec. Atqui diceret ceteros. Lorem ipsum dolor sit amet.
+      </div>
+      <div class="u-sizeFillAlt u-highlight">
+        content
+      </div>
+      <div class="u-sizeFillAlt u-highlight">
+        content
+      </div>
+    </div>
+  </div>
+  <div class="Test-run">
+    <div class="u-flex">
+      <div class="dev-Box"></div>
+      <div class="u-sizeFillAlt u-highlight">
+        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
+        aliquip nec. Atqui diceret ceteros.
+      </div>
+     <div class="u-sizeFillAlt u-highlight">
+        content
+      </div>
+      <div class="u-sizeFillAlt u-highlight">
+        content
+      </div>
+    </div>
+  </div>
+
   <h2 class="Test-describe">.u-sizeFull</h2>
   <h3 class="Test-it">fits the full-width of the container</h3>
   <div class="Test-run">
