116589 2013-05-21 22:19:00 -0700 flex items with auto margins in a vertical flex container get stretched, but they shouldn't 2017-02-28 10:46:39 -0800 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) All All RESOLVED FIXED BlinkMergeCandidate, InRadar P2 Normal --- 62048 0 dholbert webkit-unassigned cbiesinger huangxueqing hyatt jonlee ojan tony webkit-bug-importer zyuzin.vitaly oldest_to_newest 892114 0 202495 dholbert 2013-05-21 22:19:00 -0700 Created attachment 202495 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 894559 1 cbiesinger 2013-05-28 15:16:18 -0700 Fixed in Chromium: https://codereview.chromium.org/15946003 (though note that there's a separate issue with auto margins for multi-row flexboxes) 895984 2 cbiesinger 2013-05-31 14:07:58 -0700 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 1260356 3 jonlee 2016-12-15 16:26:37 -0800 <rdar://problem/29695102> 1281801 4 hyatt 2017-02-28 10:46:39 -0800 This was fixed (and this test case added) by my Blink merge to flex box. 202495 2013-05-21 22:19:00 -0700 2013-05-21 22:19:00 -0700 testcase test.html text/html 592 dholbert PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8c3R5bGU+CiAgICAuY29udGFpbmVyIHsK ICAgICAgZGlzcGxheTogLXdlYmtpdC1mbGV4OwogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAt d2Via2l0LWZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1 bW47CiAgICAgIGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOwogICAgICB3aWR0aDogNDAwcHg7CiAg ICB9CiAgICAuaXRlbTEgewogICAgICBtYXJnaW46IDAgYXV0bzsKICAgICAgYmFja2dyb3VuZDog bGlnaHRibHVlOwogICAgfQogICAgLml0ZW0yIHsKICAgICAgLXdlYmtpdC1hbGlnbi1zZWxmOiBj ZW50ZXI7CiAgICAgIGFsaWduLXNlbGY6IGNlbnRlcjsKICAgICAgYmFja2dyb3VuZDogbGltZTsK ICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+ CiAgICA8ZGl2IGNsYXNzPSJpdGVtMSI+Y2VudGVyZWRXaXRoTWFyZ2luczwvZGl2PgogICAgPGRp diBjbGFzcz0iaXRlbTIiPmNlbnRlcmVkV2l0aEFsaWduU2VsZjwvZGl2PgogIDwvZGl2Pgo8L2Jv ZHk+CjwvaHRtbD4KICAKICAgICAgCg==