Flexbox wrap question

HTML

<div class="too-narrow-container">
  <ul class="fruits">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Date</li>
    <li>Elderberry</li>
    <li>Fig</li>
    <li>Grape</li>
    <li>Honeydew</li>
  </ul>
</div>

CSS

.too-narrow-container {
  width: 30em;
  margin: 1em;
}

ul.fruits {
  display: flex;
  padding: 0.25em;
  border: 1px solid #CCC;
  background: #DDD;
  box-shadow: 1px 1px 2px #BBB inset;

  writing-mode: horizontal-bt;   /* Can't do this! */
  
  flex-flow: row wrap-reverse;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
}

ul.fruits li {
  display: block;
  list-style: none;
  margin: 0.25em;
  padding: 0.5em 1em;
  background: #FFC;
  border: 1px solid #CC9;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #999;
}