blob: cb2d70fcd288362dfcbde9954c2062826c1e613a [file] [log] [blame]
<!DOCTYPE html>
<!--
| The percentage is calculated with respect to the width of the generated box's
| containing block.
| https://www.w3.org/TR/CSS21/visudet.html#min-max-widths
-->
<html>
<head>
<style>
body {
margin: 0px;
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-width {
width: 300px;
}
.min-width {
color: #D00;
min-width: 80%;
}
.max-width {
color: #000;
max-width: 20%;
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div class="dark-sea-green">
<div class="light-blue min-width">x</div>
min-width
</div>
<div class="spacer"></div>
<div class="dark-sea-green">
<div class="light-blue max-width">0123456789</div>
max-width
</div>
<div class="spacer"></div>
<div class="dark-sea-green explicit-width">
<div class="light-blue min-width">x</div>
min-width
</div>
<div class="spacer"></div>
<div class="dark-sea-green explicit-width">
<div class="light-blue max-width">0123456789</div>
max-width
</div>
<div class="spacer"></div>
</body>
</html>