Dropdown menu responsive with flexbox and css - html

Question

I am a fresh newcomer and I have been studying and practising flexbox and CSS, just now I was trying to move my float elements into flexbox, but for a reason, I don't know my menu is broken I see the drop-down menu items upper the hamburger button, I would be happy if someone could explain what I am doing bad, thank you in advance. Here is the code:
.header {
background-color: #fff;
position: fixed;
text-align: center;
height: 50px;
width: 100%;
max-width: 480px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
z-index: 3;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
flex: 1;
}
.header .logo {
/*float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .logo img {
height: 12px;
width: 12px;
}
.header .mail {
/* float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .mail img {
height: 15px;
width: 19px;
}
.header .menu-item {
font-size: 1em;
color: #000;
padding-top: 30px;
line-height: 2.5em;
}
.header .menu-sub-item {
font-size: 1em;
color: #c4c0bf;
line-height: 2.5em;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
display: flex;
}
<header class="header">
<img src="" alt="">
<img src="" alt="">
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
</ul>
</header>
[as you see, the menu has reduced his size and the drop down went up after moving all elements into flexbox, before the menu cover his width and drop down cover all the background]