Почему FlexBox так себя ведет?

Question

[uzi_no_uzi]

https://codepen.io/anon/pen/dmeMjz - Песочница

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

Скриншот проблемы:


И еще вопрос, как сделать что бы два меню оттолкнулись друг от друга на одинаковое расстояние не используя margin? Есть такое свойство, как align-content: space-between, но оно не помогает (На скриншоте этот отступ сделан margina'ми

Comments

[Ankhena]

Ширину задайте, либо flex

Answer 1

[holymotion]

Все верно работает, оно переходит потому что у вас задано свойство у флекс контейнера: flex-direction: column, соответственно они выстраиваются в колонку, т.е меняется ось

Comments

[uzi_no_uzi]

Так это два меню в колонку переходят, т.к. flex-direction: column задан для их родителя, мне не понятно почему эти два меню сжимаются и переходят на новую строчку, когда места слева еще куча.

Answer 2

[Glorious Cat]

Начиная от тега "nav" и далее выше по родителям элемента задайте ширину в 100%.
Чтобы сработал space-between нужна фиксированная высота (или min-height). И ещё, желательно, нужно указать для child элементов соответствующие свойства (flex-basis, flex-grow, flex-shrink).
https://codepen.io/anon/pen/XEqjjB?editors=0100