How to set a fixed width column with CSS flexbox

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

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:

View post on imgur.com

Any idea what I’m doing wrong?