"pop out" min-content flex items by changing display to fixed

Issue

The problem

I'm trying to make a web page with vanilla html, css, and javascript that features a flexbox with a bunch of flex-items that have width set to min-content.

I want to make it so clicking on a flex item causes it to "pop out" of the flexbox and "stick" to the screen. However, simply changing the display property of a flex item to fixed will result in the other flex items re-adjusting themselves to fill the gap. Instead, I want the "popped-out" flex item to simply leave a gap in its place, so that the other flex items do not move around or adjust themselves.

Current Solution

I tried wrapping every flex item in a wrapper div, and making it so that when an item is clicked, the wrapper receives a fixed width equal to <wrapper>.getBoundingClientRect().width. After that is done, the wrapped element can be made fixed without disturbing the other flex items

Shortcoming of current solution

The above solution only seems to work when the width of the flex items is set to a concrete value like 100px or 5vw. If the width is set to min-content (which is what I need), the other flex items still jitter around!

Here is a minimum reproducible example: https://codepen.io/renzev/pen/mdvqLWG . As you can see, clicking on a flex item does indeed cause it to "pop out" of the flexbox, but it and the surrounding flex items still change size!

My question

How to achieve the desired "pop out" behavior without causing the surrounding flex items to change size?

Solution

I took a look at your code pen, and I noticed what you are doing...

Upon further inspection you aren't actually moving the entire wrapper (so I can assume that you don't care about the actual position of the wrapper once you have clicked on the card.
Therefore the solution is actually super simple... Sample the width,of the wrapper before you pop the card out (as you already do), then set that width of the wrapper after you pop the card out.

You can do that by setting the maxWidth and minWidth properties on the wrap box. So your javascript function becomes.

function popOut(card) {
  wrap = card.parentElement

  bbox_wrap = wrap.getBoundingClientRect();
  wrap.style.width = bbox_wrap.width + "px";
  wrap.style.height = bbox_wrap.height + "px";

  bbox_card = card.getBoundingClientRect();
  card.style.position = 'fixed';
  card.style.left = bbox_card.x + "px";
  card.style.top = bbox_card.y + "px";
  card.style.width = bbox_card.width + "px";
  card.style.margin = "0px";
  wrap.style.maxWidth = bbox_wrap.width + "px"; //necessary to make sure it doesn't grow
  wrap.style.minWidth = bbox_wrap.width + "px"; //necessary to make sure it doesn't shrink
}

Now if you cared about the position of the wrapper (again from your current code it doesn't look like you do), then in that case you would create another wrapper div with empty content and set that width/height accordingly and leave that wrapper div behind.
There's already an answer here that demonstrates how you could clone a wrapper element... You can then set the opacity to 0 if you want it invisible and in place.

Answered By - Sharp Dev