title: Absolute positioned div dynamically extending beyond relative parent div
body: <p>I have an absolute positioned div inside a relative positioned div. Both of these live inside of a parent div I can't change, which has an explicitly set <code>width</code> of 150px. I want my absolute positioned div to be able to extend beyond this 150px width. I also need this to be dynamic - i.e. I don't want to have to explicitly set a width anywhere, I want the behavior you'd normally get by setting <code>max-width</code> and having the contents of the absolute positioned div fill the available space. Is this possible?</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>.outerContainer {
    width:150px;/*can't be changed*/
  }
  
  .innerContainer {
    position: relative;
  }
  
  .absolutely {
    position: absolute;
  }
  
  .item {
    display:inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outerContainer"&gt;
      &lt;div class="innerContainer"&gt;
          &lt;div class="absolutely"&gt; &lt;!-- want this to extend beyond outerContainer width so items wrap less--&gt;
            &lt;div class="item"&gt;
                first item
            &lt;/div&gt;
            &lt;div class="item"&gt;
                second item
            &lt;/div&gt;
            &lt;div class="item"&gt;
                third item
            &lt;/div&gt;
            &lt;div class="item"&gt;
                fourth item
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>jsfiddle version:
  <a href="https://jsfiddle.net/3xbpzp7b/" rel="nofollow noreferrer">https://jsfiddle.net/3xbpzp7b/</a></p>