Bug 143603

Summary: Flexbox layout does not respect dimensions defined in percentage (in flex-direction: column)
Product: WebKit Reporter: Ben Frain <contact>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Major CC: jay
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Example HTML/CSS reproducing the issue
none
Screenshot comparing test.html in Safari and Firefox none

Description Ben Frain 2015-04-10 06:14:51 PDT 
This is possibly the same issue that https://bugs.webkit.org/show_bug.cgi?id=142906 reports but I'm not entirely sure.

The issue I am reporting is in relation to 'main-axis' dimensions, specified in percentages, not being honoured when flex-direction: column property/value is used.

Here is a reduction http://codepen.io/benfrain/pen/WbqEvL

In evergreen browsers such as Firefox and Chrome, you see a red and orange background. In Safari, you only see the orange and the content of the flexbox is collapsed.
Comment 1 Jay C 2019-10-15 11:26:10 PDT 
Created attachment 381003 [details]
Example HTML/CSS reproducing the issue

Attached is a sample file reproducing the problem. Children of a flexbox item which is set to flex-direction: column should be 100% wide. They aren't in Safari 13, they are in every other browser. 

I will also attach a screenshot.
Comment 2 Jay C 2019-10-15 11:26:44 PDT 
Created attachment 381004 [details]
Screenshot comparing test.html in Safari and Firefox

Here is the screenshot
Comment 3 Ben Frain 2022-02-09 09:26:47 PST 
Not sure when this was fixed but it is fixed in 15.3/15.4