<!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>