title: Changing heights of container divs using percentages in CSS to reflect contents
body: <p>I have the following code that mimics my problem. I want to style the elements within the "Container" div using percentages. Therefore I have to set the "Container" div to height 100% (or other value) to make this work. The problem arises when I want the "Container" div to change height to reflect contents. In the case below I'd want the height to be 200% (in this case that would work as I know the contents of "Container" but I have a datagrid in the real world case with varying numbers of rows).  If I set height to auto then I can't change the child elements using percentages.
  Is there any way around this or am I set with fixed height containers? </p>
  
  <p>Thanks,</p>
  
  <p>Rich. </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html style="height:100%"&gt;
  &lt;body style="height:100%"&gt;
  &lt;form style="height:100%"&gt;
  &lt;div id="Container" style="border:solid 5px;min-height:100%;height:100%"&gt;
  &lt;div style="height:100%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;div style="height:10%; color:red"&gt; TEST &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>