How can I position the last element at the end of the column using flexbox?

I'm trying to use flexbox to position the last item at the bottom of the vertical navbar. Is there a way to do this using flexbox?

Here is the code example:

<!doctype html>
<html>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 ul {
    list-style: none;
    background: red;
    width: 100px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
 }

 li {
    border: 1px solid blue;
 }

 li:last-child {
    background: blue;
    align-self: end;
 }

</style>
<body>
<ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
</ul>
</body>
</html>