CSS break to new column if max height hit and allow width fit content

Question

Is there any way to make a column break to a new column only if a max height is hit, but also allow width:fit-content. My issue is that I want to build a mega menu, where the list of items splits into a new column.

If you take a look at this snippet, you will see that width:fit-content is ignored.

I basically need to be able to set a max-height, and if the list flows over it, break to a new column but stretch the width to cater for this.

How can I achieve this?

.menu {
  display:flex;
}

.menu ul {
  background-color:lightgray;
  height:80px;
  display:flex;
  flex-flow: column wrap;
  width:fit-content;
}

<div class="menu">
  <ul>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>