Struggling to understand how to get this effect with flex box, and why my code doesn't work?

This may be a really stupid question but I'm trying to create a basic navigation menu with flex box.

The idea is to have a full height bar along the side of the page, the navigation should fit the whole height of the bar with each item taking up the same amount of space, with the colour of each item changing on hover.

I've got a CodePen here of what I've got so far.

I've set the container to use flex, and set it to be a column so that items are laid out vertically. I've then used justify-content to align everything on the main axis, using space-around to get everything where they should be.

However when I hover over the anchor tags I want the colour to change the space around as well, my idea was to set flex-grow to 1, however then it looks like the anchor tags are spread evenly, if that makes sense, it looks like they're sat as far above as they can get, and then space is spread downwards from them?

Could anyone help me get the desired effect and tell me where I'm going wrong, sorry if this post is confusing.

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted April 03, 2016 at 10:20PM by T96 http://ift.tt/1VnKD1s