<!DOCTYPE html>
<!--
 | Calculation of the shrink-to-fit width is roughly this: calculate
 | the preferred width by formatting the content without breaking lines other
 | than where explicit line breaks occur, and also calculate the preferred
 | minimum width, e.g., by trying all possible line breaks. Thirdly, find
 | the available width: the width of the containing block minus the used values
 | of "margin-left", "border-left-width", "padding-left", "padding-right",
 | "border-right-width", "margin-right".
 |   https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width
 |   https://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float
 -->
<html>
<head>
  <style>
    body {
      font-family: Roboto;
      font-size: 40px;
      font-weight: bold;
    }
    .min-preferred-width {
      /* TODO: Replace rulers with border: 5px solid #00b0ff; */
      /* TODO: Replace spacers with margin: 10px; */
      width: 100px;
    }
    .preferred-width {
      width: 400px;
    }
    .available-width {
      width: 200px;
    }
    .outer-inline-block {
      display: inline-block;
    }
    .inline-block {
      background-color: #0091ea;
      color: #fff;
      display: inline-block;
    }
    .ruler {
      background-color: #00b0ff;
      height: 5px;
    }
    .spacer {
      height: 5px;
    }
  </style>
</head>
<body>

  <div class="min-preferred-width">
    <div class="inline-block">Hello, world!</div>
    <div class="ruler"></div>
  </div>

  <div class="spacer"></div>

  <div class="preferred-width">
    <div class="inline-block">Hello, world!</div>
    <div class="ruler"></div>
  </div>

  <div class="spacer"></div>

  <div class="available-width">
    <div class="inline-block">Hello, world!</div>
    <div class="ruler"></div>
  </div>

  <div class="spacer"></div>

  <div class="outer-inline-block">
    <div class="inline-block">Hello, world!</div>
    <div class="ruler"></div>
  </div>
</body>
</html>