Flexbox freebie: Auto-growing list (for AMP Roadmap)

demo.css

.steps {
  ...
  /* enable flex, wrap all items.
   * - align-items' and align-content's default are set to 'stretch',
   *   so li's automatically evenly distributed and stretched
   */
  display: flex;
  flex-wrap: wrap;
  ....
  /* alternative to built-in list style that we can style */
  list-style-type: none;
  counter-reset: steps; 
}

/* the steps (li) */
.steps > li {
  ...
  /* gives items an explicit width, so we do things like
   * like ellipsis in overflowing text..
   */
  flex: 1 1 100%;
  ...
  border-left: 3px solid;
  counter-increment: steps;
}

/* the smallish description label next to the bubble */
.steps > li::before {
  /* show number + description from attribute in heading */
  content: "Step " counter(steps) ": " attr(data-description);
  ...
}

/* the bubble with the number in it */
.steps > li::after {
  ...
  /* show the number from the counter in the pseudo element */
  content: counter(steps);
}

demo.html

<ol class="steps">
  <li data-description="Step 1 description">
    <ul>
      <li>Substep 1</li>
      <li>Substep 2</li>
      <li>Substep 3</li>
    </ul>
  </li>
  <li data-description="Step 2 description">
    <ul>
      <li>Substep 1</li>
      <li>Substep 2</li>
    </ul>
  </li>
</ol>