CSS Width / Max-Width on Line Wrap?

Question

#tooltip
{ 
    position: absolute;
    width:auto;
    min-width:50px;
    max-width:250px;
    padding:10px;
    background-color:#eee;
    border:1px solid #aaa;
         


        

Answer 1

Yes, that's the normal behavior.

A browser will try to flow your text inline within the box until it reaches its maximum allowed width of 250px, then wrap to the next and subsequent lines any text that cannot fit on the first line. (If there is not enough text to reach the maximum width, then width: auto causes the box to shrink to fit just that amount of text.)

However, the box will not shrink again to fit the text after wrapping it, because text wrapping just doesn't work that way. This means the box's width is computed as 250px, and only because your CSS states that it can only be 250px at most. It's not computed to some smaller value equal to the width of the text after wrapping then overridden by max-width.

I don't think there is anything you can do to change this behavior.

Answer 2

Try using one of this:

width: max-content;
width: min-content;
width: available;
width: fit-content;

They are not 100% compatible, but prefixes fix that problem more or less.

Source: https://developer.mozilla.org/docs/Web/CSS/width