Fix size of row nested inside collapsed (flex-)grid row.

See: https://github.com/zurb/foundation-sites/issues/9557
Problem: Every row has a max width, so when nested, it cannot be
enlarged with negative margins to handle the paddings of its columns.

Fix: expand the size of all row nested in a non-expanded row.

Note: THIS IS A TEMPORARY FIX. Grids and flex-grids have a lot of bugs
like this one and should be refactorized. Please beat me if you see
this commit 6 months later and nothing changed.

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index 7791e12d0677c64cf85caa1909498699984cab37..d2f5c51e1cba5a22132b85c00f552090865cfea7 100644 (file)
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -55,6 +55,10 @@
       }
     }
 
+    &:not(.#{$expanded}) .#{$row} {
+      @include grid-row-size(expand);
+    }
+
     @if type-of($grid-column-gutter) == 'map' {
       // Static (unresponsive) row gutters
       //

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 88cadd3a17f68d17c16ab017b131ff63cd6c01c1..f0471d06475c26c929464f27bd947a130370cf66 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -141,6 +141,10 @@
       @include grid-row-size(expand);
     }
 
+    &:not(.expanded) .row {
+      @include grid-row-size(expand);
+    }
+
     &.collapse {
       > .column {
         @include grid-col-collapse;