Layout issues when overriding justify-content

[nickiaconis]

There is a bug in at least Chrome 40.0.2214.115 (64-bit) in which a style that overrides a previously styled justify-content property causes unexpected layout. The same styling produces the expected result in at least Firefox 36.

Here is an demonstration using media queries to trigger the styling: http://codepen.io/niaconis/pen/VYExLe

Here is a work around (at least when using media queries): http://codepen.io/niaconis/pen/MYPGWq

[gregwhitworth]

That's a good one, have you opened a bug against Blink? Interestingly, if it's within the same declaration it works as expected: http://codepen.io/anon/pen/bNmjGV, seems like it's failing to look up the correct layout node to store the new value; which seems odd because you'd think this was using all of the same code so it would break on all prop/val lookups for a new declaration. At any rate, I suggest opening a blink bug, but I do think we should provide this workaround.

[nickiaconis]

It looks like there are already a few issues filed for this, at least the top three in a search for "justify-content" as of writing. Interesting discovery about the same declaration.

[nickiaconis]

Also, here's another workaround that I found on a comment to one of those Blink tickets: http://codepen.io/niaconis/pen/ByqPeW If the desired override is justify-content: flex-start;, which does not work, then justify-content: initial; may be used instead, which works.

[gregwhitworth]

Yeah, I messed around with initial a little bit at first to get the depth of Chrome's issue, but initial is not supported in IE unfortunately. So if we want a true cross browser solution then your first one is the way to go. That, or you can use @supports to check for initial support and apply the Chrome fix in there.

[philipwalton]

As far as I can tell, this only happens when using space-between or space-around. When I use center, flex-start, or flex-end, I get the expected results.

[ob7]

Same issue here. Trying to find a way to override a center with space-between and its like you have both applied. I need to remove center manually somehow...