flexbugs
flexbugs copied to clipboard
philipwalton
Safari: flex-basis with flex-direction: column and justify-content: center causes elements to overflow parent
When using justify-content: center and flex-direction: column, Safari 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.
Has anyone else run into this? 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.
I'm not sure if this is a bug or not, so I haven't submitted it to the WebKit team. If there's any sort of validation in here that this is a true bug (and not just some part of the spec I don't understand), then I'll go ahead and submit it.
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.
This looks like a bug to me, I'd recommend opening a bug on Webkit or Apple BugReporter.
@danielcompton Submitted to Safari. We'll see if they kick it back as a WebKit problem or not.
Have you tried to use min-height with the same value as the flex-basis? I think it could work.
@philipwalton This is my first submission to the Safari bug tracker, but as far as I can see, they don't offer public links to the bugs. When I log in, it has the appearance of an email in an inbox rather than a forum post or BugZilla listing. If anyone has insight into how I'd find the public link, I'd be more than happy to share it in this thread.
@awayken if you look at this project's README, you'll notice lots of links to Safari bugs. Is that where you're submitting?
@philipwalton It looks like the Safari bug links are actually WebKit bug links. I submitted mine straight to Safari because I wasn't sure if it was truly WebKit or Safari that had the issue. I figured I'd start where I knew I was seeing the issue, and they would tell me if I should resubmit elsewhere. (And I've never tried downloading or compiling WebKit on its own.)
Of course, now that it's a month on and I've heard nothing back, I'm starting to wonder if I should just submit to WebKit anyway, even just for some feedback on the bug.
FYI: Safari is the browser and Webkit is the rendering engine Safari uses. If it's an issue with flexbox then it's definitely a Webkit issue. (A Safari issue would be something like if the back button isn't working.)
Is it possible that this is the reason I'm seeing a bug like this on my website?
