Странно работает display:flex;?

Question

[Pr0grammer]

<div class="main">
    <div class="container">

        <div class="menu">
        <nav class="nav">

        </nav>
    </div>
    </div>
</div>

.container{
  max-width: 700px;
  margin: 0 auto;
  border:13px solid #f7af87;
}
.main{
    height: 700px;
    background-color: #5a9bd5;
}
.menu{
    /* display: flex; */
    height: 87px;
}
.nav{ 
    background-color: #ffe699;
    height: 32px;
}

Как только в классе menu добавляю display:flex; то блок nav исчезает.
Надо чтобы было так.

Answer 1

[sergski]

nav не исчезает, а получает значение по умолчанию flex-grow: 0

Comments

[Pr0grammer]

Тогда как исправить?
Если у класса nav добавить flex-grow:1 то тогда не работает align-items:center;

[Pr0grammer]

Ой, я просто не туда написал align-items:center.СПАСИБО!!!!!!!!!!!!!!!!!!!!!!!!!

Answer 2

[neuroscript]

https://tpverstak.ru/flex-cheatsheet/
Применяешь к menu(родительский), а работает на nav(элементы)
Только не обязательно тут flex, раз элемент один.
nav можно и абсолютить, и просто блочить.