title: CSS percent height when parent has min/max height
body: <p>I know that when you use a percent height on an element, the percentage is the percent of it's parent. Let's say that you want a child to be 40% of it's parent. The parent has a max and a min height assigned, but it does not have an explicit height assigned. For example:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="one"&gt;
      &lt;div id="two"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#container{
    height: 500px;
    background: yellow;
  }
  #one{
    background: red;
    min-height:100px;
    max-height: 50%;
    padding: 10px;
  }
  #two{
    background: blue;
    height: 40%;
  }
  </code></pre>
  
  <p>Div two will not appear. When you change the css of his parent (div one) from this <code>max-height:50%</code> to this: <code>height:50%</code> div two will appear because it knows what the height of his parent is because it is explicitly defined. My question is there a way to make div two appear while using <code>(min/max)-height</code> and not <code>height</code></p>
  
  <p>Here is a <a href="http://jsfiddle.net/mXRgD/3/">fiddle</a></p>