CSS: How to make a floating card centered in the div and at the same time shrink to contents?

Question

I have a floating card with position absolute that needs to be centered over the parent div (this parent div needs to be selectable because its a map).

I've only been able to make it work by setting the width of the card to a fixed value and it looks like this:

  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  width: 164px; // <--- I don't want width to be fixed

The problem is that the floating card must be able to grow if the children change size, so setting a fixed width doesn't work.

When I dont set a fixed width the card expands to its full width. Here is a codepen example:

https://codepen.io/adrenaline681/pen/OJwoGOX

How can I make the card stay floating and match the width of its contents?

Answer 1

You could try:

width: fit-content;