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

[Anonymous]

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


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


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

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