|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|
|Severity:||Normal||CC:||hyatt, jonlee, simon.fraser, webkit-bug-importer, zalan|
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.