Bug 226483 - position:absolute behaves like position:relative in flexbox with space-between
Summary: position:absolute behaves like position:relative in flexbox with space-between
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-06-01 02:26 PDT by Aleksei Kuzmichev
Modified: 2021-06-08 02:27 PDT (History)
5 users (show)

See Also:


Attachments
demo code (1.21 KB, text/html)
2021-06-01 02:26 PDT, Aleksei Kuzmichev
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Aleksei Kuzmichev 2021-06-01 02:26:52 PDT
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.
Comment 1 Radar WebKit Bug Importer 2021-06-08 02:27:20 PDT
<rdar://problem/78993605>