Wrong layout when using flexbox columns model

• Component: Layout and Rendering
• Status: NEW ---

[Ivan]

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.

[Sergio Villar Senin]

Could you add another jsbin please? Seems like the one in the description is not working anymore.

[Ahmad Saleem]

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!

[Radar WebKit Bug Importer]

<rdar://problem/98585529>