html - How does width/height get calculated on position:absolute container with text in it and width:auto;height:auto?

Question

The following example shows a position:absolute element centered on screen, with width:auto and height:auto, yet it has some particular width to height ratio of approximately 2.909090909090909 no matter what size your viewport is.

How is this constant ratio determined?

body,
html {
width: 100%;
height: 100%;
margin: 0;
}

div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3vw;
font-family: sans-serif;
background: pink;
width: auto; height: auto
}

<div>
You are in! The pill you took is part of a trace program. It's designed to disrupt your input/output carrier signal so we can pinpoint your location.
</div>

question from:https://stackoverflow.com/questions/65944148/how-does-width-height-get-calculated-on-positionabsolute-container-with-text-in

Answer 1

If we turn off top and transform, this is how it looks:

Then, the block is moved to the center (using those top and transform), but its width is determined by the "squeeze" caused by left (remember that it's a div, so by default it wants to be 100% of the parent's width).

It means that the amount of "squeezing" is dependent on the screen width.

The thing is font-size is also dependent on the screen width: 3vw.

Since both the box's width and the font size is calculated by the width of the container (which is in this case, the same size as the viewport itself), you get that constant size.

If you had a constant font size, let's say of 2rem, this is how it will look: