title: Absolute position element's width truncates when extending beyond relative parent's right border
body: <p>These <code>position: absolute;</code> divs placed inside/around a <code>position: relative;</code> parent receive height/width from the size and length of the contained text.</p>
  
  <p>However, if one of them extends beyond the right border of the relative parent, its width appears to truncate.  </p>
  
  <p><strong>How can I make the div which extends beyond the right side of the relative parent behave as the others which don't, using only css?</strong> (Should work on all major browsers including Edge but not IE)</p>
  
  <p><a href="https://jsfiddle.net/2962v7ek/24/" rel="noreferrer">Here is a fiddle</a>, but I will also copy the code + screenshot below:  </p>
  
  <p><img src="https://s23.postimg.org/j5s0d35y3/Screen_Shot_2017_01_31_at_9_56_11_PM.png" alt="example"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="relative"&gt;
      &lt;div id="absolute-working-left"&gt;
          My width and height are determined by my text content.
      &lt;/div&gt;
      &lt;div id="absolute-working-middle"&gt;
          Mine, too.
      &lt;/div&gt;
      &lt;div id="absolute-problem"&gt;
          But not me... I am a problem, because my width is truncated when I extend beyond the right side of my 'relative' parent.  WHY???
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...and the styles. Note that I want the absolute div width to reach a max of 200px before wrapping.  Otherwise, the width should be determined by the length of the contained text:</p>
  
  <pre><code>#relative {
    position: relative;
    width: 100px;
    height: 100px;
    margin-left: 300px;
    background-color: white;
  }
  
  #absolute-problem,
  #absolute-working-left,
  #absolute-working-middle {
    position: absolute;
    top: 45px;
    font-size: 12px;
    max-width: 200px;
  }
  
  #absolute-working-left {
    background-color: lightblue;
    left: -300px;
  }
  #absolute-working-middle {
    background-color: lightgreen;
  }
  #absolute-problem {
    background-color: red;
    left: 80px;
  }
  </code></pre>
  
  <p>This issue arose while implementing a tooltip which, when used by a developer, needs to position itself WRT an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent" rel="noreferrer"><code>offsetParent</code></a> (or the body, if no preceding <code>offsetParent</code> exists in its DOM branch).</p>
  
  <p>Edit: <strong>How can I achieve the desired behavior using only css?</strong></p>
  
  <p>The solution needs to work on all major browsers including Edge, but not IE.  And just to reiterate, the <code>width</code> of the absolute divs' cannot be predicted as it should be determined by the length of the texts... the only exception being that there will be a <code>max-width</code> (in this example, it is 200px).</p>