<!DOCTYPE html>
<style>
.flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 200px;
  background: blue;
  color: blue;
}

.item {
  flex: 0 0 auto;
  line-height: 20px;
}
</style>
There should only be a blue box below, and the word "FAIL" should
not be seen.
<div class="flex">
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
  <span class="item">FAIL</span>
</div>