title: Make CSS max-width larger than parent
body: <p><a href="https://jsfiddle.net/d3yns9b6/" rel="nofollow noreferrer">https://jsfiddle.net/d3yns9b6/</a> shows how <code>max-width</code> doesn't work when I want to set it to something larger than the containing element.</p>
  
  <p>Since it's absolutely positioned it should be able to extend outside the containing element. If I set an exact value using <code>width</code> it works but then both pieces of text in the example are exactly that width.</p>
  
  <p>I want them both to take up <strong>as little</strong> width as they need, <strong>up to a maximum</strong> of the amount I set (<strong>even if it exceeds</strong> the parent container).</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>.out {
    position: relative;
    width: 200px;
    height: 400px;
    background-color: blue;
  }
  
  .in {
    position: absolute;
    max-width: 600px;
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="out"&gt;
    &lt;div class="in"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
    &lt;/div&gt;
    &lt;div class="in" style="margin-top:300px"&gt;
      Lorem
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>