Layout issues when overriding justify-content about flexbugs HOT 6 OPEN

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.

from flexbugs.

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.

from flexbugs.

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.

from flexbugs.

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.

from flexbugs.

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.

from flexbugs.

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...

from flexbugs.