136361 2014-08-28 20:27:02 -0700 Absolute positioned block inside an relative positioned flexible box item has a quirk layout. 2022-09-20 10:34:34 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Mac (Intel) OS X 10.9 NEW P2 Normal --- 1 badkaikai webkit-unassigned ahmad.saleem792 ap bfulgham simon.fraser zalan oldest_to_newest 1032117 0 badkaikai 2014-08-28 20:27:02 -0700 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> 1032118 1 237336 badkaikai 2014-08-28 20:28:33 -0700 Created attachment 237336 flexbox-test.html shows the quirk layout which i mentioned. 1033134 2 badkaikai 2014-09-03 22:29:56 -0700 Anybody here? 1033135 3 simon.fraser 2014-09-03 22:48:33 -0700 Yes but this is not high priority. 1899867 4 ahmad.saleem792 2022-09-20 10:27:45 -0700 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! 1899876 5 ahmad.saleem792 2022-09-20 10:34:34 -0700 By any change this is related to bug 210243? 237336 2014-08-28 20:28:33 -0700 2014-08-28 20:28:33 -0700 flexbox-test.html shows the quirk layout which i mentioned. flexbox-test.html text/html 1058 badkaikai PCFET0NUWVBFIEhUTUw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0 PSJVVEYtOCI+CiAgICA8dGl0bGU+PC90aXRsZT4KPC9oZWFkPgo8Ym9keT4KICAgIAo8ZGl2IGNs YXNzPSJmbGV4Ym94LXdyYXBwZXIiPgogICAgPGRpdiBjbGFzcz0ibGVmdCI+TGVmdDwvZGl2Pgog ICAgPGRpdiBjbGFzcz0icmlnaHQiPgogICAgICAgIDxkaXYgY2xhc3M9Imljb24tYSI+QTwvZGl2 PgogICAgICAgIDxkaXYgY2xhc3M9Imljb24tYiI+QjwvZGl2PgogICAgPC9kaXY+CjwvZGl2PgoK PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICogewogICAgICAgIG1hcmdpbjogMDsKICAgICAg ICBwYWRkaW5nOiAwOwogICAgfQoKICAgIC5mbGV4Ym94LXdyYXBwZXIgewogICAgICAgIGRpc3Bs YXk6IC13ZWJraXQtYm94OwogICAgICAgIGxpbmUtaGVpZ2h0OiAxMDBweDsKICAgICAgICBtYXJn aW46IDEwMHB4IDAgMDsKICAgIH0KCiAgICAubGVmdCB7CiAgICAgICAgLXdlYmtpdC1ib3gtZmxl eDogMTsKICAgICAgICBiYWNrZ3JvdW5kOiAjZWVlOwogICAgfQoKICAgIC5yaWdodCB7CiAgICAg ICAgLXdlYmtpdC1ib3gtZmxleDogMTsKICAgICAgICBiYWNrZ3JvdW5kOiAjY2NjOwogICAgICAg IHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgIH0KCiAgICAucmlnaHQgLmljb24tYSB7CiAgICAgICAg cG9zaXRpb246IGFic29sdXRlOwogICAgICAgIHdpZHRoOiAyMHB4OwogICAgICAgIGhlaWdodDog MjBweDsKICAgICAgICBsaW5lLWhlaWdodDogMjBweDsKICAgICAgICB0b3A6IDA7CiAgICAgICAg bGVmdDogMTBweDsKICAgICAgICBiYWNrZ3JvdW5kOiByZWQ7CiAgICB9CgogICAgLnJpZ2h0IC5p Y29uLWIgewogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICB3aWR0aDogMjBweDsK ICAgICAgICBoZWlnaHQ6IDIwcHg7CiAgICAgICAgbGluZS1oZWlnaHQ6IDIwcHg7CiAgICAgICAg Ym90dG9tOiAwOwogICAgICAgIGxlZnQ6IDEwcHg7CiAgICAgICAgYmFja2dyb3VuZDogYmx1ZTsK ICAgIH0KPC9zdHlsZT4KCjwvYm9keT4KPC9odG1sPgo=