title: The inherited height of a child div from a parent with a min-height attribute
body: <p>I'm sorry if this is an old issue or a known problem, but I haven't been able to find an answer online. If I have the code</p>
  
  <pre><code>&lt;style&gt;
      html, body { height: 100%; width: 100%;}
      #div1 {height:50%; min-height:200px;background-color:red;}
      #div2 {height:100%; background-color:black;}
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div id="div1"&gt;&lt;div id="div2"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then in firefox the black inner div shrinks as the screen shrinks and stops at 200px height. However in a webkit browser the red outer div stops but the inner div continue to shrink as if it was in a parent div without the min-height attribute.</p>
  
  <p>Is there an easy fix to bring the webkit version into line with the firefox rendering? A <code>min-height:inherit</code> works if placed on the inner div, but in the case of many divs within one this would require <code>min-height:inherit</code> on each child div. Are there any more elegant solutions? </p>