Bug 136361 - Absolute positioned block inside an relative positioned flexible box item has a quirk layout.
Summary: Absolute positioned block inside an relative positioned flexible box item has...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.9
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-08-28 20:27 PDT by Guo Kai
Modified: 2022-09-20 10:34 PDT (History)
5 users (show)

See Also:

Attachments
flexbox-test.html shows the quirk layout which i mentioned. (1.03 KB, text/html)
2014-08-28 20:28 PDT, Guo Kai 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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?