I am facing a challenge with positioning a floating card that needs to be centered over the parent div (which happens to be selectable because it's a map).
So far, I have only managed to achieve this by setting a fixed width for the card using the following CSS:
position: absolute;
margin: auto;
left: 0;
right: 0;
width: 164px; // <--- I wish to avoid having a fixed width
https://i.sstatic.net/GqeNi.jpg
The issue arises when the content inside the card changes size dynamically. Setting a fixed width no longer suffices.
Without a fixed width, the card ends up expanding to its full width. You can see an example of this behavior on Codepen here:
https://codepen.io/adrenaline681/pen/OJwoGOX
Is there a way to keep the card floating while adjusting its width according to the content inside?