How can I set a specific item to wrap (without float)?

Into a flex-wrap container, when the container overflows and the wrap triggers, I would like a specific item to wrap-down, instead of the last one of the container.

In the following typical webpage-header example, consider that the menu is dynamic, so the width of menu is a variable factor. How can I set the flex container, so if the items overflows the header, the menu item will be the one to wrap-down, instead of the buttons?

Regardless of the flex, if you believe that there is a more convenient way to implement according the following that you would like to suggest, it would be also appreciated. But please without float. The items in a header container might be several more than three, so a float there, would complicate things.

HTML:

<header>
    <ul>
        <li>LOGO</li>
        <li class="menu">
            <ul>
                <li><a href="#">Menu1</a></li>
                <li><a href="#">Menu2</a></li>
                <li><a href="#">Menu3</a></li>
                <li><a href="#">Menu4</a></li>
            </ul>
        </li>
        <li>
            <ul class="functions">
                <li><a href="#">Button1</a></li>
                <li><a href="#">Button2</a></li>
            </ul>
        </li>
    </ul>
</header>

CSS:

* {margin: 0; padding: 0; line-height: 1; box-sizing: border-box;}
a{text-decoration: inherit; color: inherit;}
header {
    width: 100%; 
    padding: 1rem; 
    background-color: #222; 
    font-size:1.5rem;font-family:Arial
}
header ul {
    display: flex; 
    justify-content: space-evenly; 
    flex-wrap: wrap; 
}
header ul li {
    list-style-type: none; 
    white-space: nowrap; 
    padding:0 .5rem; 
    color: #FFF
}

header > ul > li.menu{flex-grow:1}