How to set a fixed width column with CSS flexbox

I want the red box to be only 25 em wide when it's in the side-by-side view - I'm trying to achieve this by setting the CSS inside this media query:

@media all and (min-width: 811px) {...}

to:

.flexbox .red {  width: 25em;}

But when I do that, this happens:

CodePen: http://codepen.io/anon/pen/RPNpaP.

Any idea what I'm doing wrong?