It is a common rule that when applying a percentage height to an element, the percentage is calculated based on its parent's height. Consider a scenario where you want a child element to be 40% of its parent's height. The parent element has both a maximum and minimum height specified, but no explicit height set. Here is an 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%;
}
In this case, div two will not be visible. However, if you change the CSS of its parent (div one) from max-height:50% to height:50%, div two will appear because it now knows the exact height of its parent as it is explicitly defined. My question is whether there is a way to make div two appear while still using (min/max)-height properties instead of height.
For more context, check out this JSFiddle link.