Nested Flexbox, Align-items Do Not Flex-end

I'm trying to place the navigation at the bottom with flex-end. I'm not sure what's causing it not to place at the bottom. I know I can place it with position absolute, trying to

Solution 1:

In your code, you're not actually placing the nav at the bottom with align-items:flex-end. You're placing the list items at the bottom of the ul.

Except the ul container has no added height, so the list items don't go anywhere:

demo with height added

To bottom-align the nav, give it an align-self: flex-end, so it aligns within the larger flex container.

revised fiddle