Flexbox won't vertically align content

All of the flexbox tutorials that I've seen so far say that vertical align is done by using align-items and justify-content and setting both to center; however that doesn't seem to be working, as you can see below. The browser I'm using is Chrome, if that matters. Here's a codepen: http://ift.tt/1MEFqQN

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted November 03, 2015 at 02:13PM by kbrgl http://ift.tt/1l61Can