Bug 142906 - Wrong layout when using flexbox columns model
Summary: Wrong layout when using flexbox columns model
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.10
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-03-20 04:55 PDT by Ivan
Modified: 2022-08-12 13:56 PDT (History)
9 users (show)

See Also:


Attachments
Incorrect behaviour of flex-container with column flow (153.67 KB, image/png)
2015-03-20 04:55 PDT, Ivan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ivan 2015-03-20 04:55:47 PDT
Created attachment 249106 [details]
Incorrect behaviour of flex-container with column flow

Dear Sir or Madam,

First of all, I want to express my gratitude for your work!

Recently, I was working on flexbox layout. Here is what I have got: http://jsbin.com/xojopa. ".section" element uses flexbox column layout. As you can see, ".card"s do not extend parent ".section" element. Although, according to W3C spec (http://www.w3.org/TR/css-flexbox-1/#flex-flow-property) it should. I mean, a ".section" element has it's height and it specified that elements should be wrapped. It means, that in the example I provided, ".section" element should be stretched according to it's content. The same as if we had normal, horizontal flow and parent element stretched according to it's content.

I have to admit that W3C doesn't say anything explicitly about this case. However, according to the picture they provide (http://www.w3.org/TR/css-flexbox-1/images/flex-flow2.svg) current behaviour (the one I provided in the example) is incorrect.
Comment 1 Sergio Villar Senin 2020-06-18 13:00:38 PDT
Could you add another jsbin please? Seems like the one in the description is not working anymore.
Comment 2 Ahmad Saleem 2022-08-12 11:50:14 PDT
Test Case - https://jsbin.com/xojopa/edit?html,outputx

I am able to reproduce this bug in Safari 15.6 and Safari TP 121 and it is messy layout with text on text mixture and quite large, so I am not attaching screenshot but Firefox Nightly 105 and Chrome Canary 106 are same.

I am changing it from DOM to Layout and Rendering since it seems to be related to that. Thanks!
Comment 3 Radar WebKit Bug Importer 2022-08-12 13:56:39 PDT
<rdar://problem/98585529>