flex-shrink: 0 and white-space: wrap - html

Question

I have a flexbox container with 2 columns. I want the columns to stack when there isn't room to display them both. I use the following html/css
<div class="container">
<div class="column">
<div>Short content</div>
<div>This is some longer content to show problem</div>
<div>Short contetn</div>
</div>
<div class="column">
<div>Short content</div>
<div>This is some longer content to show problem</div>
<div>Short contetn</div>
</div>
</div>
and
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1 0 auto;
/* grow, don't shrink */
}
JS fiddle here: http://jsfiddle.net/AsdNS/
It seems that there is implicitally white-space: nowrap on the inner divs, but I don't want this. If I did want it surely I would specify it in my css. Is there a way to not wrap whitespace and then only wrap the columns if a single block of text with no whitespace is too big?
In practice I want to force it to wrap on some whitespace, but not others (I will use <span>s)
EDIT Here is a more real-world jsfiddle: http://jsfiddle.net/W7g3U/1/
What I want is for the long div to wrap, but the short divs not to.
EDIT 2 Here is what I want to achieve (works in chrome) http://plnkr.co/edit/Ppoe8xJrrbC16Y1vyWCD