Encountering a problem with Chrome 40.0.2214.93 where overriding the justify-content for an element results in unexpected behavior.
For reference, here is a JS Fiddle showcasing the issue: http://jsfiddle.net/n670tmeu/
html
<header id="top">
<div id="box1">
This is Box 1
</div>
<div id="box2">
This is Box 2
</div>
</header>
css
header {
background-color: #ccc;
width: 100%;
display: -webkit-flex;
display: -moz-flexbox;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
}
header#top {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#box1, #box2 {
border-width: 1px;
border-style: solid;
border-color: red;
}
After testing in FireFox 35.0.1 and Safari 7.1.2, it appears that Chrome handles the justify-content override differently. In Chrome, the first item is pushed to flex-end with additional space, while FireFox and Safari display the expected behavior. Is this a Chrome bug or an error in my coding?