Bootstrap - automatic size columns with responsive width

I feel like this may have been answered before, but I've searched and can't find any problems that come close.

I'm working with a pretty standard bootstrap row and columns setup to style a menu bar (flexbox). This menu is generated by wordpress in php, rather than hard coded in html. As it's part of a website the menu can change over time: it may have 4 items at one time or 7 at another. Because these are items that can change, I don't know exactly how wide each will be.

I'm trying to make a row with one column for each item, so they each sit next to each other and fill the full width of the row. I can do this in bootstrap by simply using col, so it sets to make each column equal width.

<ul class="row">

  <li class="col">Menu Item 1</li>
  <li class="col">Menu Item 2 with much longer menu title</li>
  <li class="col">Menu Item 3 with long title</li>
  <li class="col">Menu Item 4</li>
  <li class="col">Menu Item 5</li>
  
</ul>

In the example, where we have 5 items, each column is 20% wide. However, this isn't ideal for my menu as the menu text will differ: I'd like longer items to fill more space and shorter ones to fill less, so you would get 30% and 10% instead of 20% - 20%.

Does anyone know if there's a way to do this in flexbox? I'm open to alternatives, like using simple divs width float: left applied, or similar, my main problem using these so far is that they don't naturally fill the full space of the row without having a width applied.

Note: I'm aware this is pretty much exactly what a table does. I'm not open to using a table for this as it's a responsive piece of coding, and I need menu items to style differently on devices, for instance give 100% width for each menu item on mobile. It'll be a huge headache to do achieve that with a table but very straightforward to do so with flexbox.

if you say you want to do it using flexbox without using bootstrap necessarily, you can build such a structure.

each column will have its own content up to in length. and when the page gets smaller, the items that don't fit will be wrapped one by one.

.row {
  display: flex;
  flex-wrap: wrap;
}

.row>.col {
  flex: 1 1 auto;
}

<ul class="row">
  <li class="col">Menu Item 1</li>
  <li class="col">Menu Item 2 with much longer menu title</li>
  <li class="col">Menu Item 3 with long title</li>
  <li class="col">Menu Item 4</li>
  <li class="col">Menu Item 5</li>
  <li class="col">Menu Item 6</li>
  <li class="col">Menu Item 7</li>
</ul>

Please tell me if I misunderstood you.