Created attachment 202495 [details] testcase STR: 1. Load testcase. EXPECTED RESULTS: Both lines should be centered horizontally. ACTUAL RESULTS: The first line ("centeredWithMargins") isn't centered -- its background is stretched to fill the width of the container. I'm testing Chrome Version 28.0.1500.20 dev, which gives ACTUAL RESULTS. Firefox Nightly and Opera 12.15 both give EXPECTED RESULTS. Pulling back the covers slightly: this is a flex container with one flex item, and WebKit is stretching it horizontally (in the cross axis) due to the "align-self: stretch" property. However, it's not supposed to do that when the flex item has auto margins in the cross axis, as noted in the spec here: > If a flex item has ‘align-self: stretch’ [...] and > neither of its cross-axis margins are ‘auto’, > the used outer cross size is the used cross size of > its flex line (i.e. stretch it). http://www.w3.org/TR/css3-flexbox/#cross-sizing
Fixed in Chromium: https://codereview.chromium.org/15946003 (though note that there's a separate issue with auto margins for multi-row flexboxes)
Alright, for several of blink's patches for auto margins in fleboxes, see the commits mentioned in https://code.google.com/p/chromium/issues/detail?id=242654#c6
<rdar://problem/29695102>
This was fixed (and this test case added) by my Blink merge to flex box.