It seems that once a container div is set with the min-height property as a percentage, height and min-height no longer work with inner div's using percentages.
The code is below...(everything working as expected):
html,body{
height:100%;
background:black;
}
.container{
height: 30%;
background-color: green;
}
p{
min-height:90%;
background-color:purple;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<p>The minimum height of this paragraph is set with percentage</p>
</div>
</body>
</html>When I set the container div to a min-height percentage, the purple paragraph shrinks down. I was expecting the paragraph to stay 90% of the containing div. The only thing different with this non-working version is I set "height" to "min-height" for the container div.
html,body{
height:100%;
background:black;
}
.container{
min-height: 30%; /* LINE CHANGED */
background-color: green;
}
p{
min-height:90%;
background-color:purple;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<p>The minimum height of this paragraph is set with percentage</p>
</div>
</body>
</html>Any help or insight into what is going on would be greatly appreciated. I really want to be able to do this: this is part of a more complex design..I just watered it down to basics for the question...
