title: Make a child as wide as the parent of parent
body: <p>I have two nested <code>div</code>. Outermost nested into <code>section</code>.</p>
  
  <p>Is it somehow possible to make innermost <code>div</code> as wide as <code>section</code>?</p>
  
  <p>Here is my snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 0 auto;
      padding: 0;
      background-color: blue;
  }
  
  
  #content {
      background-color: orange;
      padding: 20px;
      width: 300px;
      height: 100px;
      margin: 0 auto;
  }
  
  #inner {
    background-color: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;section id="content"&gt;
      &lt;div&gt;
        &lt;p&gt;
          test
        &lt;/p&gt;
        &lt;div id="inner"&gt;
          &lt;p&gt;
            inner
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>