Bug 116589

Summary: flex items with auto margins in a vertical flex container get stretched, but they shouldn't
Product: WebKit Reporter: Daniel Holbert <dholbert>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: cbiesinger, huangxueqing, hyatt, jonlee, ojan, tony, webkit-bug-importer, zyuzin.vitaly
Priority: P2 Keywords: BlinkMergeCandidate, InRadar
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 62048    
Description Flags
testcase none

Description Daniel Holbert 2013-05-21 22:19:00 PDT
Created attachment 202495 [details]

 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).
Comment 1 Christian Biesinger 2013-05-28 15:16:18 PDT
Fixed in Chromium: https://codereview.chromium.org/15946003

(though note that there's a separate issue with auto margins for multi-row flexboxes)
Comment 2 Christian Biesinger 2013-05-31 14:07:58 PDT
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
Comment 3 Jon Lee 2016-12-15 16:26:37 PST
Comment 4 Dave Hyatt 2017-02-28 10:46:39 PST
This was fixed (and this test case added) by my Blink merge to flex box.