What steps will reproduce the problem? Load http://jsfiddle.net/q52pk5m4/1/ What is the expected output? The black-bordered box (the flex item) should shrinkwrap the text. No red should be visible. What do you see instead? The black-bordered box is 400px tall. It is much taller than its text. The flex item does have "height: 400px", but that should have no effect on its actual height, since it's a flex item and its flex-basis property is set. (The default 'flex-basis' property defers to the 'height', but here we've set flex-basis to 0%.) Since we don't have anything to resolve our 0% against, the 0% is treated like auto-sizing, and so we should shrinkwrap the text. But WebKit is incorrectly treating flex-basis:0% like flex-basis:auto and interpreting that 'auto' as meaning it should fall back to the 'height' property, which it should not This very same issue has been reported and fixed for Chrome on https://crbug.com/531656 And there are two WPT tests for this: https://wpt.live/css/css-flexbox/flex-basis-010.html https://wpt.live/css/css-flexbox/flex-aspect-ratio-img-column-010.html
The flex-aspect-ratio test is fixed in https://bugs.webkit.org/show_bug.cgi?id=215570
Created attachment 408696 [details] Patch
Created attachment 408701 [details] Patch
Comment on attachment 408701 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=408701&action=review > Source/WebCore/rendering/RenderFlexibleBox.cpp:851 > + const auto& flexBasis = flexBasisForChild(child); I don’t think const auto& is a good type to use here. Just "auto" would be fine or "Length".
Committed r267086: <https://trac.webkit.org/changeset/267086>
<rdar://problem/68923070>