CSS percent height when parent has min/max height

Question

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:

<div id="container">
  <div id="one">
    <div id="two"></div>
  </div>
</div>

css

#container{
  height: 500px;
  background: yellow;
}
#one{
  background: red;
  min-height:100px;
  max-height: 50%;
  padding: 10px;
}
#two{
  background: blue;
  height: 40%;
}

Div two will not appear. When you change the css of his parent (div one) from this max-height:50% to this: height:50% 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 (min/max)-height and not height

Here is a fiddle

Answer 1

Check this out, you are missing one tiny piece. Suppose you want to set the height of #one compared to #container and #two compared to #one (that's what I think you are going for). We need a height statement of #one to get a height from #two. The trick here is to set a max-height, a min-height, AND a height to the element, thereby giving it a height that is constrained by the min and the max.

Try this css:

 <style>
 #container{
   height: 74vh;
   background: yellow;
 }
 #one{
   background: red;
   min-height:100px;
   max-height: 50%;
   height: 100%;
   padding: 10px;
 }
 #two{
   background: blue;
   height: 40%;
 }
 </style>

The height is never achieved because it is constrained by the max-height, but without declaring the height it is height: auto, which is undeclared. I set the height of #container as 74vh to make the whole thing responsive according to the size of the viewport.