Why can't I specify a base width for a flex element?

Question

css

I'm trying to figure out flexbox, it seems to work in one place, but I try to make something else, then everything seems to work in my understanding, but for some reason it doesn't work.
In general, here, I tried to make up a header with a logo and a menu .
I did everything like this: I
created a flex container, placed 2 elements in it, the menu itself and the logo. I made a space-between to press along the edges. Then I made a flex container from the menu, and it turned out that the list items became flex items. I've tried giving them flex-basis, but it doesn't work. I don’t even understand why they just don’t fit in one line, why one element doesn’t fit and wrap the text ???
How can I make the Logo be on the left and the menu on the right, and so that the elements have the specified base size?

Answer 1

We need to allow the ul container to grow if it doesn't have enough space.
codepen.io/anon/pen/gMgLEm

Answer 2

your element containing the menu blocks must be wide enough so that the inner blocks fit all their full width
if they do not fit and they do not have the compressibility parameter set to zero - then everything will shrink to fit