Did Chrome 40 break justify-content CSS overriding?

You are entirely correct in your understanding of the cascade. If you look in the Web Inspector, you'll see the justify-content: center declaration struck out, but only when you uncheck it (in a similar fashion as commenting it out) can you get Chrome to ignore it.

Perhaps they accidentally broke something in a change between Chrome 39 and 40, as they have a really irritating habit of doing, but I have no idea what.

From the issue that rwacarter linked to, apparently they did something funky with their cascade resolution code in order to accommodate certain changes to the Flexbox spec, which seems to be the cause for this. Again, I don't claim to understand their reasons for doing so, but they seem to have a habit of rewriting things here and there that result in regressions all over the place. Good thing Chrome is on an evergreen rapid release cycle, eh?

Definitely looks to be a bug, and a very serious/annoying one at that!

I've written a hack to help us get through it. You'll only want to run this for affected chrome versions and might want to further tailor and test it for your application:

$('body *').each(function(i, el){    var justifyContents = $(el).css('justify-content').split(' ');    var flexFlows = $(el).css('flex-flow').split(' ');    if (flexFlows[0] == 'row' && justifyContents.length > 1) {        if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {            $(el).css('justify-content', justifyContents[0]+' left');        } else if (justifyContents[0] == 'flex-end') {            $(el).css('justify-content', justifyContents[0]+' right');        }    }});

This is an angularjs implementation for script posted by @Mike T

angular.module('myApp').directive('flexChromeFix', function() {    return {        restrict: 'A',        link: function(scope, element, attrs, fn) {            var justifyContents = element.css('justify-content').split(' ');            var flexFlows = element.css('flex-flow').split(' ');            if (flexFlows[0] == 'row' && justifyContents.length > 1) {            if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {                element.css('justify-content', justifyContents[0] + ' left');            } else if (justifyContents[0] == 'flex-end') {                element.css('justify-content', justifyContents[0] + ' right');            }        }        }    };});