Flexbox flex-wrap：有没有办法强制包裹增长？

Question

我有一组垂直堆叠的弹性物品。 flex容器设置为wrap。我希望它尽快包装，这样它将水平填充页面而不是垂直增长。此外，这些项目都填充了动态文字，所以我不想设置固定的高度，也不想看到它们裁剪。

HTML

<div class="fc v menu">
  <div class="fa">
    <h1>Title</h1>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>  
  </div>
  <div class="fa">ITEM 2</div>
  <div class="fa">ITEM 3</div>
  <div class="fa">ITEM 4</div>
  <div class="fa">ITEM 5</div>
  <div class="fa">ITEM 6</div>
  <div class="fa">ITEM 7</div>
  <div class="fa">ITEM 8</div>
</div>

CSS

.fc {
  display: flex;
}

.fc.menu {
  flex-wrap: wrap;
  height: 15em;
}

.menu > div {
  padding: 1em;
}

.fa {
  flex: 1 0 auto;
  width: 10em;
  height: 5em;
}

.fc.v {
  flex-direction: column;
  background: pink;
  border: 4px fuchsia solid;
}

您可以在codepen中看到，即使可以强制进行某种换行，内容也不再适合容器。