title: Set width of child to parents width including border
body: <p>How can I set the width and the alignment of the <code>.inner</code> class to match the width of its parent?</p>
  
  <p>Possible solutions would be:</p>
  
  <ul>
  <li>set <code>box-sizing: content-box</code> and <code>left: -1px</code>(border size)</li>
  <li>set <code>left: -1px</code>and <code>right: -1px</code></li>
  </ul>
  
  <p>But I think these solutions are not perfect because you have to know the border-size of the parent and/or you have to work with <code>box-sizing: content-box</code> but i want to avoid this.</p>
  
  <p>Furthermore I can´t just change the DOM hierarchy because I want to restyle elements which are generated by a JS-framework</p>
  
  <p><strong>Do you know any better solutions?</strong></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>*, *:before, *:after{
    box-sizing: border-box;
   }
  
  .outer{
    border: 1px solid black;
    width: 50%;
    position: relative;
    }
  
  .inner{
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    border: 1px solid black;
    // box-sizing: content-box;
    // left: -1px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    text
    &lt;div class="inner"&gt;Inner&lt;/div&gt;
  &lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>