Bug 167240 – Items in a flexbox column layout are not properly constrained to the container's height if the item's height is larger than the container's height

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Phil]

Created attachment 299348 [details]
Test Case

Steps to reproduce

1. Open the attached test case
2. note the height of the green and red box

Expected result:

The green and red boxes should both be the same size

Actual result:

The red box is taller - it appears that a flexbox layout with flex-direction: column does not properly constrain the height of items to the container when the item's height is larger than the container.

This bug only affects column layouts - when flex-direction is "row" the item's width is properly constrained to the container's width

Tested in other browsers - latest Chrome, Firefox and Edge - it works as expected - height of items is properly constrained.

Note that the behavior Safari is exhibiting is what you would expect when flex-shrink is set to 0 on the item, however in this test case the value of flex-shrink is the default (1)

[Phil]

Created attachment 305469 [details]
Test Case With Flexing

I've attached an additional test case demonstrating that flexing an item does not correct the issue.  It's probably irrelevant since the default value for flex-shrink is 1, but worth considering anyway.

[Radar WebKit Bug Importer]

<rdar://problem/31381899>

[Ahmad Saleem]

I am not able to reproduce this issue in Safari 16 using both attached test case and there is no difference in height of boxes and both boxes are of same height. It matches in rendering with other browsers (Chrome Canary 108 and Firefox Nightly 107).

Marking this as "RESOLVED CONFIGURATION CHANGED", please reopen with updated testcase, if you are able to reproduce this. Thanks!