Pushing items to the bottom in a vertical menu

I have a simple menu in a sidebar.

<div class="sidebar">
  <ul class="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li class="bottom"><a href="#">Link 5</a></li>
    <li class="bottom"><a href="#">Link 6</a></li>
  </ul>
</div>

The menu is obviously vertical. I'm using flexbox.

.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 150px;
  overflow: visible;
  z-index: 10;
  background-color: #222d32;
  transition: left 0.3s ease, width 0.3s ease;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  padding-bottom: 10px;
  overflow: hidden;
}

.menu > li {
  width: 100%;
  list-style: none;
}

.menu > li > a {
  color: #fff;
  text-decoration: none;
}

.menu > li.bottom {
  margin-top: auto;
}

Here is a working example in JSFiddle.

I am trying to push those .bottom list items to the end of the sidebar menu. I saw a solution around here suggesting using margin-top: auto but that only does the trick for a single item. Not if you want to have multiple stacked at the end.

I tried using flexbox properties but that didn't work either. Here it is. The changes I introduced:

.menu > li {
  width: 100%;
  list-style: none;
  flex: 1;
  max-height: 30px;
}

.menu > li.bottom {
  align-self: end;
}

That's not working as intended. Besides I am not a fan of having to set a max-height. How can I tell flexbox to have the li container to adjust to the content's size but at the same time have those .bottom list items pushed to the end?