flex items with auto margins in a vertical flex container get stretched, but they shouldn't

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Daniel Holbert]

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

[Christian Biesinger]

Fixed in Chromium: https://codereview.chromium.org/15946003

(though note that there's a separate issue with auto margins for multi-row flexboxes)

[Christian Biesinger]

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

[Jon Lee]

<rdar://problem/29695102>

[Dave Hyatt]

This was fixed (and this test case added) by my Blink merge to flex box.