[Webkit-unassigned] [Bug 136361] New: Absolute positioned block inside an relative positioned flexible box item has a quirk layout.

Thu Aug 28 20:26:56 PDT 2014

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

           Summary: Absolute positioned block inside an relative
                    positioned flexible box item has a quirk layout.
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.9
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: badkaikai at gmail.com

Look the code below, the layout and position of div.icon-b element maybe wrong, it should be at the bottom of the div.right element. But when i change div.icon-a to position: relative, the layout looks right.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div class="flexbox-wrapper">
    <div class="left">Left</div>
    <div class="right">
        <div class="icon-a">A</div>
        <div class="icon-b">B</div>
    </div>
</div>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .flexbox-wrapper {
        display: -webkit-box;
        line-height: 100px;
        margin: 100px 0 0;
    }

    .left {
        -webkit-box-flex: 1;
        background: #eee;
    }

    .right {
        -webkit-box-flex: 1;
        background: #ccc;
        position: relative;
    }

    .right .icon-a {
        position: absolute;
        width: 20px;
        height: 20px;
        line-height: 20px;
        top: 0;
        left: 10px;
        background: red;
    }

    .right .icon-b {
        position: absolute;
        width: 20px;
        height: 20px;
        line-height: 20px;
        bottom: 0;
        left: 10px;
        background: blue;
    }
</style>

</body>
</html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.