Width of absolutely positioned element

Question

I have absolutely positioned div element ( .tooltip ) and another div ( .text ) inside it with text (that has max-width set). When left property of .tooltip is big enough it's width gets shrinked (i guess because default value of right property is 0). What i want, is to .tooltip respect the width of .text (it's content) in the first place. What i have tried:

1. setting width of tooltip to fit-content - this is basically what i want to achieve (showed on the snippet) but it does not work on IE (which i have to support). Without that width of .tooltip gets shrinked.

2. setting fixed width of tooltip or text - also not possible because text in text div can be pretty short and then there will be empty space.

3. on the other hand text can be really long so i can't set white-space: nowrap like suggested in similar questions.

 .tooltip { position: absolute; border: 1px solid red; left: 400px; width: fit-content; }.text { max-width: 200px; }

 <div style="border: 1px solid green;width:500px; height: 500px; position:relative"> <div class="tooltip"> <div class="text">test test test test test test test test test</div> </div> </div>

Answer 1

On idea is to replace left with translation:

 .tooltip { position: absolute; border: 1px solid red; left: 0; transform:translateX(400px); }.text { max-width: 200px; }

 <div style="border: 1px solid green;width:500px; height: 500px; position:relative"> <div class="tooltip"> <div class="text">test test test test test test test test test</div> </div> </div>

If you want to keep the use of left , consider some negative margin to give the element more space:

 .tooltip { position: absolute; border: 1px solid red; left: 400px; margin-right:-400px; /* Make it bigger enough, at least the same as left */ }.text { max-width: 200px; }

 <div style="border: 1px solid green;width:500px; height: 500px; position:relative"> <div class="tooltip"> <div class="text">test test test test test test test test test</div> </div> </div>