Bug 167240

Summary: 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
Product: WebKit Reporter: Phil <pguerrant>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: hyatt, jonlee, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: Mac   
OS: macOS 10.12   
Description Flags
Test Case
Test Case With Flexing none

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