Brute force the auto override issue

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index b4d3e115f7da0de27bf8ce3255025bee8b1d259c..0f4d889054d34db3ab9939c4e85fc01cd81877df 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -44,12 +44,22 @@
 
   // Auto width
   @include -zf-each-breakpoint() {
-    // This is a bit of a hack/workaround, see these PRs for the backstory:
+    // This is a bit of a hack/workaround, see these issues & PRs for the backstory:
+    // https://github.com/zurb/foundation-sites/issues/10244
     // https://github.com/zurb/foundation-sites/pull/10222 and
     // https://github.com/zurb/foundation-sites/pull/10164
-    .grid-x > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
-      flex-basis: auto;
+    .grid-x {
+      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      @for $i from 1 through $grid-columns {
+        $str: $str + ", > #{$-zf-size}-#{$i}"
+      }
+      #{$str} {
+        flex-basis: auto;
+      }
     }
+  }
+
+  @include -zf-each-breakpoint() {
     @if not($-zf-size == small) {
       .grid-x > .#{$-zf-size}-auto {
         @include xy-cell-base(auto);
@@ -257,13 +267,20 @@
 
 
     @include -zf-each-breakpoint() {
-      // This is a bit of a hack/workaround, see these PRs for the backstory:
+      // This is a bit of a hack/workaround, see these issues and PRs for the backstory:
+      // https://github.com/zurb/foundation-sites/issues/10244
       // https://github.com/zurb/foundation-sites/pull/10222 and
       // https://github.com/zurb/foundation-sites/pull/10164
-      > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
+      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      @for $i from 1 through $grid-columns {
+        $str: $str + ", > #{$-zf-size}-#{$i}"
+      }
+      #{$str} {
         flex-basis: auto;
       }
+    }
 
+    @include -zf-each-breakpoint() {
       @if not($-zf-size == small) {
         > .#{$-zf-size}-auto {
           @include xy-cell-base(auto);

diff --git a/test/visual/xy-grid/kitchen-sink.html b/test/visual/xy-grid/kitchen-sink.html
index 423acd033f1a8589e9e267712cb100eac5c16239..31faca17e8e14df51319ce34093dbc2cc3c85724 100644 (file)
--- a/test/visual/xy-grid/kitchen-sink.html
+++ b/test/visual/xy-grid/kitchen-sink.html
@@ -139,6 +139,11 @@
       <div class="cell small-7 large-shrink"><div class="demo">7 on small, shrink on large</div></div>
     </div>
 
+    <div class="grid-x grid-margin-x">
+      <div class="cell small-5 large-auto"><div class="demo">5 on small, auto on large with a ton of content that should still be even</div></div>
+      <div class="cell small-7 large-auto"><div class="demo">7 on small, auto on large</div></div>
+    </div>
+
     <h3>Margin - collapse</h3>
     <p>The cells should collapse on large screens and above.<p>