Bug 226483 – position:absolute behaves like position:relative in flexbox with space-between

• Status: NEW
• Component: Layout and Rendering

[Aleksei Kuzmichev]

Created attachment 430242 [details]
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.

[Radar WebKit Bug Importer]

<rdar://problem/78993605>