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>
Status: RESOLVED FIXED    
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    
Attachments:
Description Flags
testcase none

Daniel Holbert
Reported 2013-05-21 22:19:00 PDT
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
Attachments
testcase (592 bytes, text/html)
2013-05-21 22:19 PDT, Daniel Holbert 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Christian Biesinger
Comment 1 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)
Christian Biesinger
Comment 2 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
Jon Lee
Comment 3 2016-12-15 16:26:37 PST
<rdar://problem/29695102>
Dave Hyatt
Comment 4 2017-02-28 10:46:39 PST
This was fixed (and this test case added) by my Blink merge to flex box.
Note You need to log in before you can comment on or make changes to this bug.