226483 2021-06-01 02:26:52 -0700 position:absolute behaves like position:relative in flexbox with space-between 2021-06-08 02:27:20 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 14 Mac (Intel) macOS 11 NEW InRadar P2 Normal --- 1 lesha webkit-unassigned bfulgham simon.fraser svillar webkit-bug-importer zalan oldest_to_newest 1765538 0 430242 lesha 2021-06-01 02:26:52 -0700 Created attachment 430242 demo code Running Safari Version 14.0.3 (16610.4.3.1.7) https://jsfiddle.net/suda14q3/ I have a flexbox with justify-content:space-between. One of its descendants (.parent_right) has two children: .ch1 (gold), .ch2 (lime), both 100px wide. When I resize the webpage down past 500px, I trigger a media query, which sets position:absolute to .ch1. Safari doesn't seem to update .parent_right's width and it looks like its still takes 200px of space. If I now reload the webpage, everything will look fine (.parent_right 100px wide because .ch2 is 100px wide and .ch1 is positioned absolute) I will resize the window back up to 500px+ and another bug occurs: children of .parent_right take up 50px each. --- Expected behavior: When resizing down: .ch1 is moved to the top of .ch2, no space is left to the right of them. .parent_right takes 100px; When resizing back up: everything returns back to initial state I'm sorry if this explanation is clumsy, not a native speaker. I can record a video of the bug if needed. 1767709 1 webkit-bug-importer 2021-06-08 02:27:20 -0700 <rdar://problem/78993605> 430242 2021-06-01 02:26:52 -0700 2021-06-01 02:26:52 -0700 demo code safari bug.html text/html 1236 lesha PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJz ZXQ9IlVURi04IiAvPgogICAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250 ZW50PSJJRT1lZGdlIiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRo PWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+RG9jdW1lbnQ8 L3RpdGxlPgogICAgPHN0eWxlPgogICAgICBib2R5IHsKICAgICAgICBtYXJnaW46IDA7CiAgICAg IH0KCiAgICAgIGRpdiB7CiAgICAgICAgaGVpZ2h0OiAzMnB4OwogICAgICB9CgogICAgICAubmF2 YmFyIHsKICAgICAgICBiYWNrZ3JvdW5kOiAjMDAwMDAwMjA7CiAgICAgICAgZGlzcGxheTogZmxl eDsKICAgICAgICBtYXJnaW4tdG9wOiAzMnB4OwogICAgICAgIGp1c3RpZnktY29udGVudDogc3Bh Y2UtYmV0d2VlbjsKICAgICAgfQogICAgICAubmF2YmFyIC5wYXJlbnRfbGVmdCB7CiAgICAgICAg d2lkdGg6IDIwMHB4OwogICAgICAgIGZsZXgtc2hyaW5rOiAwOwogICAgICAgIGJhY2tncm91bmQ6 IHJvc3licm93bjsKICAgICAgfQogICAgICAubmF2YmFyIC5wYXJlbnRfcmlnaHQgewogICAgICAg IHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICB9CiAgICAg IC5uYXZiYXIgLnBhcmVudF9yaWdodCAuY2gyIHsKICAgICAgICB3aWR0aDogMTAwcHg7CiAgICAg ICAgYmFja2dyb3VuZDogbGltZTsKICAgICAgfQogICAgICAubmF2YmFyIC5wYXJlbnRfcmlnaHQg LmNoMSB7CiAgICAgICAgd2lkdGg6IDEwMHB4OwogICAgICAgIGJhY2tncm91bmQ6IGdvbGQ7CiAg ICAgIH0KICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDUwMHB4KSB7CiAgICAgICAgLm5hdmJhciAu cGFyZW50X3JpZ2h0IC5jaDEgewogICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAg ICAgdG9wOiAtMzJweDsKICAgICAgICB9CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgog IDxib2R5PgogICAgPGRpdiBjbGFzcz0ibmF2YmFyIj4KICAgICAgPGRpdiBjbGFzcz0icGFyZW50 X2xlZnQiPjwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJwYXJlbnRfcmlnaHQiPgogICAgICAgIDxk aXYgY2xhc3M9ImNoMSI+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0iY2gyIj48L2Rpdj4KICAg ICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4K