168130 2017-02-10 10:35:32 -0800 flex-basis with flex-direction: column and justify-content: center causes elements to overflow parent 2022-07-15 11:26:15 -0700 1 1 1 Unclassified WebKit CSS Safari 10 All All RESOLVED CONFIGURATION CHANGED https://codepen.io/awayken/pen/wgazpb/ P2 Normal --- 1 miles webkit-unassigned bfulgham jarek miles PenguinMan98 oldest_to_newest 1275388 0 miles 2017-02-10 10:35:32 -0800 When using justify-content: center and flex-direction: column, WebKit seems to miscalculate the height of the flex parent when some of the flex items have a flex-basis specified. The result is that some items can spill out of the box at the flex-start end. I had a page where my heading (the first element in my flex container) was spilling up out of the parent and became white text on white background. It took a long time to figure out what exactly was going on. I see it in Safari 10.0.2 and Mobile Safari on iOS 10.2. Test case: https://codepen.io/awayken/pen/wgazpb/ - in the problem browsers, Line 1 will be cut off as it overflows upward out of the <body>. Work-around: either eliminate flex-basis on flex items or use justify-content: flex-start or justify-content: flex-end. There might be other justify-content values that work, too. 1309858 1 PenguinMan98 2017-05-17 15:17:04 -0700 I'm not sure if it helps to post a 'me too' but here goes. +1 Here's my code pen: https://codepen.io/anon/pen/rmZpOK 1884121 2 bfulgham 2022-07-15 11:26:15 -0700 Safari, Chrome, and Firefox all agree on rendering for both test cases. I don't believe there is any remaining compatibility issue.