blob: 7eff2c0238717ad6cd524bb4372102f763d790f3 [file] [log] [blame]
<!DOCTYPE html>
<!--
| The percentage is calculated with respect to the height of the generated box's
| containing block.
| https://www.w3.org/TR/CSS21/visudet.html#min-max-heights
-->
<html>
<head>
<style>
body {
color: #fff;
font-family: Roboto;
font-size: 25px;
}
.light-blue {
color: #fff;
background-color: #03a9f4;
display: inline-block;
}
.dark-sea-green {
color: #fff;
background-color: #8FBC8F;
display: inline-block;
}
.explicit-height {
height: 50px;
}
.min-height {
color: #D00;
min-height: 80%;
}
.max-height {
color: #000;
max-height: 20%;
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div class="dark-sea-green">
<div class="light-blue min-height">x</div>
x
</div>
<div class="spacer"></div>
<div class="dark-sea-green">
<div class="light-blue max-height">x</div>
x
</div>
<div class="spacer"></div>
<div class="dark-sea-green explicit-height">
<div class="light-blue min-height">x</div>
x
</div>
<div class="spacer"></div>
<div class="dark-sea-green explicit-height">
<div class="light-blue max-height">x</div>
x
</div>
<div class="spacer"></div>
</body>
</html>