How to lay out a menu on flexbox?

Question

css

Hello!
I'm laying out the menu in the header, and the top line consists of two columns.
In the left column is the main menu, in the right column is the authorization menu.
If I set the left menu to flex-wrap: wrap, then when the screen narrows, the menu items start wrapping.
If I give the left menu flex-wrap: nowrap then the left menu starts pushing the right menu out of the body.
And I want to make the right menu seem to be in place all the time, so that it doesn’t get pushed out, fix it, and at the same time, so that the items on the left menu are not transferred, but that they begin to hide if they do not fit in the container.
I don't know how to do it. Tell me, please ..
here is an example:
https://codepen.io/mk3mk/pen/NWKeMpJ?editors=1100