Flexbox drop down menu position and movement - html

Question

I'm trying to design a header with 3 items:
----------
LOGO
---------- hidden navigation bar
----------
BUTTON
----------
Which then grows to:
----------
LOGO
----------
li
li
li
li
----------
BUTTON
----------
I'd like the logo and the button to remain vertically centered and for all growth/movement to happen downwards from the top of the button/bottom of the logo-container. I've managed this without flexbox, but I'd like to use it so that I can get a better understanding of why this isn't working.
At the moment - unless I put a large height for the logo container - which feels a bit hacky - the menu grows upwards as well as down. I'd ideally like to use justify-content: space-around but obviously that attributes some space to the hidden menu.
I feel like flex-shrink might be a solution, but I'm very much a novice at all this, and can't get it to work. Here's what I've got so far:
https://codepen.io/nwoodward/pen/RMrRVZ
$('#button').click(function() {
$('.menu').toggleClass('menu--open', 700);
})
header {
background: #808080;
display: flex;
flex-direction: column;
min-height: 100px;
}
#logo-container {
display: block;
flex-grow: 2;
background: red;
width: 100%;
height: 50px;
text-align: center;
}
#logo-container img {
height: 40px;
}
.menu {
height: 0px;
overflow: hidden;
background-color: green;
}
.menu--open {
height: auto;
}
#button {
background: blue;
width: 100%;
height: 20px;
text-align: center;
cursor: pointer;
}
#rest {
height: 500px;
background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="logo-container">
<img src="https://trellis.co/wp-content/uploads/2015/09/hidden_meanings_facts_within_famous_logos_cover_image.jpg">
</div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="button">Click Me</div>
</header>
<section id="rest">

Answer 1

I don't see any good reason to use flexbox in that case. But to answer your question, the key is the header {min-height: 100px;} setting.
With the default collapsed menu, the overall computed height of elements in the header is smaller than 100px. However it will be greater than 100px when the menu expands. Therefore, it creates the effects of pushing the menu to the top first and then to the bottom.