Width Of Absolutely Positioned Element

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 ge

Solution 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;
}

<divstyle="border: 1px solid green;width:500px; height: 500px; position:relative"><divclass="tooltip"><divclass="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;
}

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