How to make flex-wrap balance its wrapped items?

Question

I am making a responsive layout, and on smaller screens a sidebar <ul> is turning into a display: flex with flex-wrap: wrap and the items styled with flex-grow: 1 . This looks fine most of the time:

However, this looks pretty bad when only a couple of items overflow, such as on a slightly larger screen:

Is there any way to get flex-box to attempt to wrap things based on having a balanced total item width per row? For example, in the second example, it would make much more sense for "People" (and maybe "Protocols" as well) to flow to the second line.

Or, is there is an alternate approach I should be taking to lay this menu out?

jsfiddle link

Answer 1

You could add a media query to change the behaviour in smaller viewports.

For example:

@media (max-width: 768px) {
  nav li {
    min-width: 25%;
  }
}

That way, at least you won't have more than 4 items per row on a small screen.