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
Summary: Items in a flexbox column layout are not properly constrained to the containe...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Mac macOS 10.12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-01-20 07:54 PST by Phil
Modified: 2022-09-30 16:11 PDT (History)
7 users (show)

See Also:


Attachments
Test Case (816 bytes, text/html)
2017-01-20 07:54 PST, Phil
no flags Details
Test Case With Flexing (977 bytes, text/html)
2017-03-27 08:55 PDT, Phil
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Phil 2017-01-20 07:54:09 PST
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)
Comment 1 Phil 2017-03-27 08:55:24 PDT
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.
Comment 2 Radar WebKit Bug Importer 2017-03-31 16:19:16 PDT
<rdar://problem/31381899>
Comment 3 Ahmad Saleem 2022-09-30 16:11:33 PDT
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!