Как запретить flex-box выталкивать другие элементы из контейнера? ⇐ Html

[Anonymous]

Это немного сложно объяснить, но рассмотрим гибкий заголовок с меню, а затем что-то еще справа, имеющее фиксированную ширину. Поскольку размер окна уменьшается по ширине, для меню остается меньше места. В конце концов меню выталкивает другой элемент из контейнера.
Рабочий пример здесь.
Плохо


Обратите внимание, как «другое» выпадает справа.
Добавление overflow: скрытый в элементе контейнера меню делает так, чтобы «другая вещь» не была отправлена. Однако это, конечно, также предотвращает отображение раскрывающегося меню. Я попытался обойти это, установив overflow-x: Hidden; overflow-y: видимый, но, видимо, это неверный параметр.
Лучше, но нет раскрывающегося меню


(игнорируйте, что «Элемент 1» был скрыт. В реальном коде «Пункт 5» имел бы перемещено в дополнительное меню и не включено в демо-версию.)
Вопрос
Как я могу сделать это работает как нижний пример, но без добавления переполнения: скрыто в меню? То есть, как я могу помешать flex-box выталкивать «другую вещь» вправо?

Подробнее здесь: https://stackoverflow.com/questions/711 ... -container