CSS Positioned Absolute Element, automatic width outside of parent's bounds?

So, I have my parent element positioned relative, in order to allow a tooltip element to be positioned absolute inside, at the top of it. I am aware that you are required to add "left: 0, right: 0", so that the width of the element is still able to be set to auto, which I have done. However, my parent element has a fixed width, which the tooltip becomes restrained to, so the auto width cannot go outside of it, is there any way around this?

CSS:

.parent {
  position: relative;
  width: 100px;
  height: 100px;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  width: auto;
  padding: 5px 10px;
}

Elements:

<div class="parent">
  <div class="tooltip">Text goes here</div>
</div>

No JS please, looking for a CSS solution, thanks!

Not setting both left and right on .tooltip, and setting white-space: nowrap should do it:

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  text-align: center;
  width: auto;
  padding: 5px 10px;
  white-space: nowrap;
}

Working example.

You'd need to use this solution to center an absolute element. It does require an additional element, though. Demo

I believe the best solution for this issue is not setting left, right or white-space: nowrap but we have a new value for width property max-content... so just add the width: max-content;(this one works with max-width as well)

demo: http://jsfiddle.net/qLgw8bxu/

support: https://caniuse.com/#search=max-content

.tooltip {
 background-color: blue;
 position: absolute;
 text-align: center;
 padding: 5px 10px;

 width: max-content;
}