Grommet: Safari Flexbox Bug / Regression - Shrinking / overlapping flex containers

[RyanCCollins]

It seems that a flexbox bug has recently been introduced into Grommet. I believe that this documented flexbox bug is the culprit.

We are experiencing this in the content rendered by the grommet-cms in safari. Content that should have a minimum height seems to be shrinking so that successive flexbox items overlap on top of one another.

From the link posted above

When flex items are too big to fit inside their container, those items are instructed (by the flex layout algorithm) to shrink, proportionally, according to their flex-shrink property. But contrary to what most browsers allow, they're not supposed to shrink indefinitely. They must always be at least as big as their minimum height or width properties declare, and if no minimum height or width properties are set, their minimum size should be the default minimum size of their content.

Expected Behavior

There should be normalization in the grommet flexbox implementation so that this bug is fixed cross browser.

Actual Behavior

We are seeing this bug across the entire grommet-cms and brand-central site, which was previously working (pre 1.3 release).

URL, screen shot, or Codepen exhibiting the issue

I've added a link to a gif showing this below. The browser on the left is safari, and on the right is chrome. Chrome seems to have the correct behavior and the bug is being shown in safari.

Notice in the gif, how setting flex: 0 1 auto on the flex container resolves the issue, since it instructs safari to set the flex-shrink property to 0. I think in Safari, the default is flex-shrink: 1, which is the cause of the overlapping content. I can add a fix to the grommet-cms / brand-central site, but figure that this could / should be resolved in grommet.

NOTE: the gif is too big to post here. Please see here.

Steps to Reproduce

I will post a codepen for this with steps to reproduce later today. For now, contact me and I will link you to the brand-central staging site.

Your Environment

• Grommet version: 1.3.0
• Browser Name and version: Safari Version 9.1.2 (11601.7.7)
• Operating System and version (desktop or mobile): Desktop and iOS Mobile.

[RyanCCollins]

I am going to close this because I don't think this is up to grommet. It'd be amazing to figure out a way to normalize the flexbox spec cross browser, but that's up to the browser vendors not grommet.

[fernandoabolafio]

Hi, Im current working with Grommet and Im facing the reported issue. Please, if someone knows a work around for it I would be grateful.

[aldofunes]

Hi, I found a workaround. It is nasty, but works. The bug is basically with the flex-shrink property; so, I disabled it.

div.grommetux-box {
  flex-shrink: 0;
}

That's it