Bug 175327

Summary:

Flexbox Container with `column wrap` expands height only for last column

Product:

WebKit

Reporter:

Byron Hulcher <byronhulcher>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

bfulgham, hyatt, simon.fraser, zalan

Priority:

Version:

Safari 9

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
The broken repro case in Safari	none
A working repro case in Chrome	none

Byron Hulcher

Reported 2017-08-08 09:23:48 PDT

Created attachment 317576 [details] The broken repro case in Safari Here's a reproduction on Codepen: https://codepen.io/anon/pen/YxZdLq It appears that when laying out items in a flex container with `flex-direction: column` and `flex-wrap: wrap` then the container will only expand vertically to the height of the final column of children. In the example I include the blue child expands beyond the bounds of the flex container in the first two examples, but in the final example, where it takes up the final wrapped column, the container correctly expands. In Chrome and Firefox, the flex container expands its height as expected.

Attachments
The broken repro case in Safari (12.93 KB, image/png) 2017-08-08 09:23 PDT, Byron Hulcher	no flags	Details
A working repro case in Chrome (13.36 KB, image/png) 2017-08-08 09:24 PDT, Byron Hulcher	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Byron Hulcher

Comment 1 2017-08-08 09:24:40 PDT

Created attachment 317577 [details] A working repro case in Chrome

Brent Fulgham

Comment 2 2022-07-15 14:24:40 PDT

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.

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