Vertically spacing items in a div (flexbox space-around not working..) - html

Question

Here is an image of my side nav. I'd like to have more control over evenly distributing these items in the nav (there is more room on top and bottom than is show in the image).
Image of the side nav elements, with grid and Materialize formatting things correctly.
Here the relevant code (using grid, which is not included here, as well as the "grid" module from Materialize, which gives me some helps for formatting text etc.):
.nav-side-wrapper {
display: flex;
flex-direction: column;
}
.nav-side {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
}
.side-nav-links {
border-bottom: 2px solid;
}
<nav class="valign-wrapper nav-side-wrapper">
<div class="container nav-side">
<ul class="side-nav-links center-align">
<li>Learning Hub</li>
<li>Resources</li>
<li>Glossary</li>
</ul>
<ul class="center-align side-buts">
<li><button class="but-test">Click me!</button></li>
<li><button class="but-test">Click me!</button></li>
<li><button class="but-test">Click me!</button></li>
</ul>
</div>
</nav>
I've tried all combinations, removing the valign-wrapper and center-align helpers from Materialize, moving the flex code (display, flex-direction, justify-content, etc.) around, trying seemingly every combination between which lines go where, between .nav-side-wrapper and .nav-side.
It's really stumping me... Any help would be majorly appreciated.
Ideally, I'd like the links to be spaced along the top half of the nav, and the buttons evenly spaced along the bottom half of the nav.

Answer 1

A solution to this is to set the flex property to 1 on the flex child. When this property is set on a flexible item, it will make all the items the same length. If you add padding to your top and bottom of the flex child as well, you can play around with the perception of the height. The snippet shows the parent flex to be a height of 400px. You can play around with the height to see how it retains the space-around spacing.
.nav-side-wrapper {
height: 400px;
width: 30%;
display: flex;
flex-direction: column;
background-color: pink;
justify-content: space-around;
}
.nav-side {
display: flex;
-webkit-flex: 1;
/* Safari 6.1+ */
-ms-flex: 1;
/* IE 10 */
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 10% 0px;
}
hr {
border: none;
background-color: black;
height: 2px;
width: 90%;
}
<nav class="nav-side-wrapper">
<div class="nav-side">
<div>Learning Hub</div>
<div>Resources</div>
<div>Glossary</div>
</div>
<div>
<hr>
</div>
<div class="nav-side">
<div><button class="but-test">Click me!</button></div>
<div><button class="but-test">Click me!</button></div>
<div><button class="but-test">Click me!</button></div>
</div>
</nav>

Answer 2

try adding this your CSS
.nav-side {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
.side-buts{
display: flex;
justify-content: space-around;
flex-direction: column;
}