RESOLVED CONFIGURATION CHANGED Bug 168130
flex-basis with flex-direction: column and justify-content: center causes elements to overflow parent 
https://bugs.webkit.org/show_bug.cgi?id=168130
Summary flex-basis with flex-direction: column and justify-content: center causes ele...
Miles Rausch
Reported 2017-02-10 10:35:32 PST
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.
Attachments
Add attachment proposed patch, testcase, etc.
Joe
Comment 1 2017-05-17 15:17:04 PDT
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
Brent Fulgham
Comment 2 2022-07-15 11:26:15 PDT
Safari, Chrome, and Firefox all agree on rendering for both test cases. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.