title: Parent DIV with min-height and child with percentage height doesn't working
body: <p>Im experincing some problems with a min-height on a div and its children height.
  I know what is happening but I don't know how to solve it.</p>
  
  <p>I have this HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;img src="#"/&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the stylesheet:</p>
  
  <pre><code>#container { min-height:180px; max-height:20%;}
  #container img { height:60%;}
  #container ul { height:40%; padding:10px;}
  #container ul li { height:100%; float:left;}
  </code></pre>
  
  <p>What I'm trying is to apply to the UL, the 40% of the parent. What I get is that the UL is getting the window's height, not its parent.
  If I put just a max-height or a fixed height, it works.</p>
  
  <p>I supose the problem cames by the time the items are created or something like that, but i'm not sure cause the IMG takes its parent's height</p>
  
  <p>Any solution?</p>
  
  <p>I think that finally I'm getting close to the solution thanks to @Jay-Bee-Why, but I didn't get it.</p>
  
  <p>Case 1-
  container has height:180px and max-height:20%
  Then the container flows, and its children to the max-height, but there is no limit on the minimum so, the problem is not solved</p>
  
  <p>Case 2-
  container has min-height, height, and max-height
  Here only min-height is working.For example:
      #container { min-height:100px; height:180px; max-height:20%}
  Here container's height varies from 100px to 180px. max-height is omitted.</p>
  
  <p>As I explain on the comments, the point I'm looking for is a DIV with a variable height from 180px to 20% of window browser's height wich contains two items. An IMG, with 60% of his parent height, and a UL with 40% inside it, there is a floating LI with 100% of their parent height.</p>