Wie kann verhindert werden, dass die Flexbox andere Elemente aus dem Container drückt? ⇐ HTML

[Guest]

Es ist etwas schwer zu erklären, aber stellen Sie sich einen flexiblen Header mit einem Menü und dann etwas anderem auf der rechten Seite vor, das eine feste Breite hat. Je kleiner das Fenster wird, desto weniger Platz bleibt für das Menü. Schließlich schiebt das Menü das andere Ding aus dem Container.
Arbeitsbeispiel hier.
Schlecht


Beachten Sie, wie das „andere Ding“ fällt nach rechts heraus.
Hinzufügen overflow: versteckt im Menücontainerelement sorgt dafür, dass das „andere Ding“ nicht gepusht wird. Dies verhindert jedoch natürlich auch, dass das Dropdown-Menü angezeigt wird. Ich habe versucht, das Problem zu umgehen, indem ich overflow-x:hidden; overflow-y: sichtbar, aber das ist offenbar keine gültige Einstellung.
Besser, aber kein Dropdown-Menü


(Ignorieren Sie das „Item 1“ wurde ausgeblendet. Im echten Code wäre „Item 5“ dorthin verschoben worden ein Überlaufmenü – nicht in der Demo hier enthalten.)
Frage
Wie kann ich dafür sorgen, dass es funktioniert? das unterste Beispiel, aber ohne overflow:hidden zum Menü hinzuzufügen? Das heißt, wie kann ich verhindern, dass die Flexbox das „andere Ding“ nach rechts schiebt?