auto and shrink cells are broken

[skotlinski1]

How to reproduce this bug:

Here is a link:
https://codepen.io/skotlinski1/pen/LQYOpN

What should happen:

On large every cells should be 100% width (large-12) except 4th scenario where second cell on medium should be '3 units' long

What happened instead:

Big mess instead, click on the link and see :-)

Browser(s) and Device(s) tested on:

Safari 11.01, Chrome 63, Firefox 57, Opera 50

Foundation Version(s) you are using:

6.4.3 and 6.4.4-rc1

Test case link:

https://codepen.io/skotlinski1/pen/LQYOpN

[skotlinski1]

Workaround:

I've added to the file _classes.scss in line 86 "xy-cell-base();" and now it works fine :-)

 @for $i from 1 through $grid-columns {
   // Sizing (percentage)
   .grid-x > .#{$-zf-size}-#{$i} {
     @include xy-cell-base(); // <-- ADDED BY ME
     @include xy-cell-static($i, false, $gutter-type: padding);
   }
 }

[skotlinski1]

Second workaround:

Because the first one increased app.css size by 5-8kb, I've added another mixin instead:

// Reset width of cell on particular breakpoint (and up)
  
@mixin dss-reset-cell-width-to-full {
  @include -zf-each-breakpoint() {
    @if not($-zf-size == small) {
      .grid-x > .#{$-zf-size}-width-reset {
        @include xy-cell-base(full);
      }
    }
  }
}
@include dss-reset-cell-width-to-full();

It creates additional classes for each breakpoint e.g. medium-width-reset, large-width-reset etc.

Put it together with another "static-sized" cell class, e.g. "large-12 large-width-reset" or "medium-3 medium-width-reset"

examples:
<div class=cell medium-auto large-12 large-width-reset>
or
<div class=cell shrink medium-6 medium-width-reset large-auto>

[ncoden]

Hi @skotlinski1. I finally had enough time to investigate your issue. At first, thank you for the CodePen you provided. It help us a lot to test everything and understand what's wrong. 👍

All the bugs you found comes from two little mistakes: we forgot to reset flex-shrink, flex-grow and flex-basis it some responsive modifiers of the XY grids. So "it works" when you re-apply "xy-cell-base" everywhere, but it would come with a lot of stuff we do not want to duplicate ;)

I'll open a PR. Thanks again for the ✨ quality ✨ of this issue ;)

[ncoden]

@skotlinski1 See #10927.

Does it solves your issue ?

[rafibomb]

@skotlinski1 This seems to be the fix. How did it work for you? Just trying to make sure we can merge this in.

[skotlinski1]

Yes, thank you, now everything works great :-)