Bug 168130
| Summary: | flex-basis with flex-direction: column and justify-content: center causes elements to overflow parent | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Miles Rausch <miles> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | bfulgham, jarek, miles, PenguinMan98 |
| Priority: | P2 | ||
| Version: | Safari 10 | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | https://codepen.io/awayken/pen/wgazpb/ | ||
Miles Rausch
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
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
Safari, Chrome, and Firefox all agree on rendering for both test cases. I don't believe there is any remaining compatibility issue.