<!DOCTYPE html>
<!--
 | These two properties allow authors to constrain content widths to a certain
 | range.
 | <length> Specifies a fixed minimum or maximum used width.
 |   https://www.w3.org/TR/CSS21/visudet.html#min-max-widths
 -->
<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;
    }
    .min-width {
      color: #D00;
      min-width: 50px;
    }
    .max-width {
      color: #000;
      max-width: 50px;
    }
    .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>

</body>
</html>