title: show 100% width child within non 100% width parent
body: <p>I have a div that has max-width of let's say 1024px and I have it's child that needs to take 100% width starting at the left of the screen.</p>
  <p>Is it possible without introducing additional markup? I understand that can make child 100% with width: 100vw; but can't seem to push it to the left.</p>
  <p>CODE</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>.parent {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .child {
    margin-top: 20px;
    padding: 20px;
    width: 100vw;
    background: grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;a href="#" class="toggle"&gt;Toggle content&lt;/a&gt;
    &lt;div class="child"&gt;Content&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codepen.io/anon/pen/QgbPJj" rel="nofollow noreferrer">https://codepen.io/anon/pen/QgbPJj</a></p>