"Pop out" a flex element into fixed position | Smarter Dev | Page 1

@torn otter

renzev_96644 Uploaded Some Code

Hello. I'm trying to make a webpage with vanilla html, css, and javascript. It consists of a wrapping flexbox containing a bunch of boxes inside it. I want to make it so that when a box is clicked, it "pops out" of the flexbox and becomes position: fixed;. I want this to happen in a way that won't cause the rest of the elements in the flexbox to re-adjust.

My current solution is to wrap the boxes in a div. When the box is clicked, the wrapping div gets assigned a fixed width and height, so that it still occupies the same amount of space in the flexbox, and does not cause the other boxes to re-adjust. The actual card can now gain position: fixed without disturbing the flexbox.

The issue comes when the width of the boxes is set to be min-content. For some reason, using this pop-out trick still causes the neighboring flex elements to adjust.

I'm testing in Chromium on desktop. Here is a minimum reproducible example: https://codepen.io/renzev/pen/mdvqLWG . I am also attaching a complete HTML file with the same example.
You can see that clicking a box does in fact "pop it out", but it still causes the neighboring boxes to twitch slightly. Changing the box size from min-content to a fixed value like 5vw fixes this. But that is not an option for me, I want to use min-content.

How can I achieve this pop-out behavior without having each box disturb the neighboring boxes? I'm open to any solution, it doesn't have to use the wrapping method that I came up with. Maybe it would be better to create a copy of the box, with fixed position, and simply hide the original box that's still inside the flexbox?

Thank you!

Uploaded these files to a Gist

test.html

View The Gist

#"Pop out" a flex element into fixed position