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: NEW
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: 2017-03-31 16:19 PDT (History)
5 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>