[Webkit-unassigned] [Bug 168130] New: flex-basis with flex-direction: column and justify-content: center causes elements to overflow parent

Fri Feb 10 10:35:32 PST 2017

https://bugs.webkit.org/show_bug.cgi?id=168130

            Bug ID: 168130
           Summary: flex-basis with flex-direction: column and
                    justify-content: center causes elements to overflow
                    parent
    Classification: Unclassified
           Product: WebKit
           Version: Safari 10
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: miles at milesrausch.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170210/7affd144/attachment.html>