title: Max width of absolute positioned element
body: <p>I have a centered div (using absolute positioning and transform:translate(-50%,-50%) as described <a href="https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div/8273750#8273750">here</a>). When the content of the child div is short everything works fine. When the content is long, then the child div width is limited to 50% of the container div (probably because left is set to 50%).</p>
  
  <p>Is there a way to allow the child div to expand to the full width only when the content is long?</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>.container {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-left: auto; 
    margin-right: auto;
    border: 2px solid black;
  }
  
  .child {
    position: absolute;
    transform: translate(-50%, -50%);
    left:50%;
    top:50%;
    background:lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="child"&gt;short&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="child"&gt;long long long long long long long&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Edit</strong>: I found an explanation that helped me wrap my head around this in <a href="https://stackoverflow.com/a/7337237/1400366">this</a> answer.</p>