title: Trouble with nowrap and max-width on an absolutely positioned element
body: <p>I'm guessing these two attributes don't actually work together, but my situation:</p>
  
  <p>I'm trying to create a tooltip component. My tooltip is positioned absolutely, and as I don't know what the length of the content would be, has no width. So with width-related css, text just forms a tall, skinny column. I tried <code>max-width</code>, but on it's own, that does nothing. So I decided to try <code>white-space: nowrap</code>, and while it nicely doesn't wrap text, it also doesn't seem to honor max-width in a useful way, with text instead going out of the boundaries of the element.</p>
  
  <p>I can't think of how to solve my problem, if there is a clean solution. I'd like to have an absolutely positioned div that expands to fit it's content until a maximum, at which point it wraps. One suggestion I saw was making the element a flexbox, but from what I can tell, that's not great with IE, so I don't think is viable in my situation. Any advice?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    position: relative;
    display: inline;
  }
  
  .info {
    position: absolute;
    bottom: 1.2em;
    left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;span&gt;[ ? ]&lt;/span&gt;
    &lt;div class="info"&gt;Any long text can go in here to test what goes wrong with wrapping.&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>