3.3.0 breaks latest Chrome

[adrienharnay]

Hey,

I understand why #43 has been done, but since upgrading to 3.3.0, all my layouts are broken in latest Chrome. Flex elements overlap over each other in a big mush. Should the specs be followed on this matter?

Thanks!

[luisrudge]

can you create a codepen so I can take a look?

[zslabs]

☝️ Same. If I write flex: 100% in my styles, it converts it to 100% 1 0% which is not valid in Chrome. In 3.2.0 it converted that same style to 100% 1

[luisrudge]

can you tell me why that's not valid? is that because you can't use percentage number percentage as a value?

[zslabs]

Hey Luís,
I couldn't find anything about "why" it doesn't work, but in the Chrome inspector, it blocks out that entire flex line as an invalid value for that property.

[luisrudge]

and 100% 1 is valid?

[luisrudge]

can you do a quick codepen so I can test it?

[zslabs]

https://codepen.io/zslabs/pen/BYymvP

[luisrudge]

There's something really weird going on on both chrome and firefox.

.flex-child1 {
  flex: 100% 2;
  /*
  flex-basis: 100%;
  flex-grow: 2;
  flex-shrink: 1;
  */
}

But the spec says that with two values, the first one should be unitless:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex#Syntax

[adrienharnay]

Hey, after some testing it is the more apparent on Safari iOS <= 10

[luisrudge]

So, all browsers are not following the spec? 😝

[zslabs]

Are we kind of at an impasse with this one? The docs around this are a bit confusing; I just haven't found any Chromium bugs to back up this being an issue with how the browser is handling it.

[luisrudge]

I honestly have no idea. The spec is very clear, but, apparently, browsers are not following the spec at all :(

[judowalker]

Please correct me if I'm wrong, but isn't the actual spec here:
https://www.w3.org/TR/css-flexbox-1/#flex-property

According to that, the acceptable values are:
none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

The double bar (||) separates two or more options: one or more of them must occur, in any order.
https://drafts.csswg.org/css-values-4/#comb-any

If I'm interpreting that correctly, that means flex-basis can be first. So Chrome is correct in treating 100% 1 0% as invalid but 100% 1 0 as valid with 100% being flex-basis.

[luisrudge]

You must be right. I only glanced the spec and didn't read the double || thing. I'm glad they're right and I'm wrong though!

[adrienharnay]

Yeah this is actually great news!

[adrienharnay]

Could we arrange a revert of 3.3.0 then? (#43)

[luisrudge]

fixed in #46

published in 3.3.1

Thanks everyone!

[adrienharnay]

Neat, thanks to you!