Почему не получается указать базовую ширину flex элементу?

Question

[gleendo]

Пытаюсь разобраться в flexbox, вроде бы в одном месте получается, а пробую что то другое сверстать, то все, кажется что должно работать в моем понимании, но почему то не работает.

В общем вот, пытался сверстать header с логотипом и меню.

Делал все так:
Создал flex контейнер, в него поместил 2 элемента, собственно меню и логотип. Сделал space-between, что бы по краям прижать. Далее сделал из меню flex контейнер, и получилось что элементы списка стали флекс элементами. Пробовал указать им flex-basis, но ничего не выходит. Я даже не пойму почему они просто в одну строчку не встают, почему один элемент не помещается и переносить текст???

Как сделать чтобы Логотип был слева, а меню было справа и чтобы элементы имели указанный базовый размер?

Answer 1

[Сергей delphinpro]

Нужно разрешить контейнеру ul увеличиваться, если ему не хватает места.
codepen.io/anon/pen/gMgLEm