Flexbox flex-wrap not allowing more than one item in dropdown - Bulma.css

Question

I am creating a webpage using the Bulma CSS files, and I have a problem with the navbar. So I am trying to customize the dropdown in the navbar a little bit, including having links side-by-side instead of up-down. This is what the default dropdown looks like in Bulma:

However, I want to create something like this... But with multiple rows:

And that's where my problem is. I can't make them go on to new lines after the max-width is reached, they just keep on going to the right side if I have a lot of items.

This is the HTML element structure:

                <div class="navbar-item has-dropdown is-hoverable">
                    <a id="trending" class="navbar-link is-arrowless">Trending</a>
                    <div id="trending-dropdown" class="navbar-dropdown">
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                    </div>
                </div>

The .navbar-dropdown has display: flex; as well.

Now, here's what I tried:

1. adding a flex-wrap: wrap to the .navbar-dropdown: This just makes each element stay on its own line, just like what I already had in Bulma (see 1st img)
2. Giving a flex: 1 to the .navbar-items (I also used flex-basis: 10%)
3. Giving a max-width to the dropdown

This Is the link to codepen: https://codepen.io/coderDeveloper/pen/bGWpOva

   I really hope someone can help me as I'm at my wit's end 😃
               Thanks in advance!!

Answer 1

You can do a width of max-content on the parent with flex-wrap, maybe a gap, then on the children do a flex: auto or 0 depending on how you want the second line to layout, with min-width calculated to a percentage of the width of the parent.

Parent element:

  display: flex;
  flex-wrap: wrap;
  width: max-content;

Child element:

  flex: 0;
  min-width: calc(33% - 1em);

Link to your code pen with these settings

.navbar-dropdown  {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  gap: 1em;
}

.navbar-dropdown {
  display: none;
}

.navbar-item:hover .navbar-dropdown {
  display: flex;
}

.navbar-dropdown a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0;
  min-width: calc(33% - 1em);
  height: 2em;
  background: #ddd;
}

<div class="navbar-item has-dropdown is-hoverable">
  <a id="trending" class="navbar-link is-arrowless">Trending</a>
  <div id="trending-dropdown" class="navbar-dropdown">
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
  </div>
</div>