Bug 143603

Summary:

Flexbox layout does not respect dimensions defined in percentage (in flex-direction: column)

Product:

WebKit

Reporter:

Ben Frain <contact>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Major

CC:

jay

Priority:

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

Ben Frain

Reported 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.

Attachments
Example HTML/CSS reproducing the issue (2.24 KB, text/html) 2019-10-15 11:26 PDT, Jay C	no flags	Details
Screenshot comparing test.html in Safari and Firefox (1.71 MB, image/png) 2019-10-15 11:26 PDT, Jay C	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Jay C

Comment 1 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.

Jay C

Comment 2 2019-10-15 11:26:44 PDT

Created attachment 381004 [details] Screenshot comparing test.html in Safari and Firefox Here is the screenshot

Ben Frain

Comment 3 2022-02-09 09:26:47 PST

Not sure when this was fixed but it is fixed in 15.3/15.4

Note You need to log in before you can comment on or make changes to this bug.