title: div not inheriting size of child div
body: <p>I am trying to understand a problem I am facing when moving my application from one area to another. I was previously testing my HTML in an isolated test application and have got it to a stage where I am happy with it. So I began integrating it into the correct place. When doing this I found I am having a curious CSS problem as the div elements no longer appear to be inheriting the dimensions of the child divide.</p>
  
  <p>I created a <a href="http://jsfiddle.net/CyubA/" rel="nofollow noreferrer">JSFiddle</a> in order to demonstrate the problem, code also provided below.</p>
  
  <p>Working backwards, the outermost div with the style attributes hard-coded for height and width (100px) appears to have a computed style that I would expect.</p>
  
  <p><img src="https://i.stack.imgur.com/rjR7z.png" alt="The leaf div with the explicitly styled height and width of 100px."></p>
  
  <p>Happy so far. We can see 100px for height and width.</p>
  
  <p>The div with the class <em>child</em> also appears to inherit the dimensions from the child content, as I would expect. We see 100px for height and width.</p>
  
  <p><img src="https://i.stack.imgur.com/1Vfbm.png" alt="The child div inherits 100px from it&#39;s child content"></p>
  
  <p>So far, correct behaviour.</p>
  
  <p>However, this is where my knowledge of CSS falls down. The div with class <em>parent</em> appears to lose all width and height information from it's content and so the user sees nothing in the browser as the size for these div's essentially becomes 0px and the content is hidden.</p>
  
  <p><img src="https://i.stack.imgur.com/mB4ph.png" alt="The computed width and height is 0px. This is not what was expected!"></p>
  
  <p>The question I have, is why does the width and height not get inherited from the children of the div element with the <em>parent</em> style class.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="grandparent"&gt;
      &lt;div class="parent"&gt;
          &lt;div class="child"&gt;
              &lt;div style="height: 100px; width: 100px; background-color: black;"&gt;hello&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.grandparent {
      height: auto;
      position: absolute;
      margin: 0;
      overflow: auto;
      display: block;
      background-color: red;
  }
  .parent {
      position: relative;
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
      display: block;
      background-color: green;
  }
  .child {
      height: auto;
      position: absolute;
      margin: 0;
      overflow: auto;
      display: block;
      background-color: blue;
  }
  </code></pre>