How to make a flex child overflow its parent as it grows?

I have a flexbox with a single flex child:

<div class="flex-parent"><div class="flex-child">    lots of content...</div></div>

.flex-parent has a fixed size:

.flex-parent {  height: 250px;}

The flex child has so much content that it should overflow the size of its parent. Instead, its height stays "capped" at the height of the parent (250px).

How can I fix this and make .flex-child grow with its content? I can easily fix it by switching to display: block but my real layout is much more complicated which makes that impractical.

The problem: http://codepen.io/anon/pen/OWjYwe
How it should work: http://codepen.io/anon/pen/apyraV