Bug 136361

Summary: Absolute positioned block inside an relative positioned flexible box item has a quirk layout.
Product: WebKit Reporter: Guo Kai <badkaikai>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, simon.fraser, zalan
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.9   
Attachments:
Description Flags
flexbox-test.html shows the quirk layout which i mentioned. none

Description Guo Kai 2014-08-28 20:27:02 PDT 
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>
Comment 1 Guo Kai 2014-08-28 20:28:33 PDT 
Created attachment 237336 [details]
flexbox-test.html shows the quirk layout which i mentioned.
Comment 2 Guo Kai 2014-09-03 22:29:56 PDT 
Anybody here?
Comment 3 Simon Fraser (smfr) 2014-09-03 22:48:33 PDT 
Yes but this is not high priority.
Comment 4 Ahmad Saleem 2022-09-20 10:27:45 PDT 
I am able to reproduce this bug in Safari 16 and Safari Technology Preview 153 using attached test case and A & B are not spread apart like the other browser (Chrome Canary 108 and Firefox Nightly 107).

Just wanted to share updated testing results. Thanks!
Comment 5 Ahmad Saleem 2022-09-20 10:34:34 PDT 
By any change this is related to bug 210243?