Created attachment 299348 [details]
Steps to reproduce
1. Open the attached test case
2. note the height of the green and red box
The green and red boxes should both be the same size
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)
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.