The workaround for this is to add width: 0 to the .box1 elements.
See: http://jsfiddle.net/thirtydot/fPfvN/
I think I found that out for myself here: http://oli.jp/2011/css3-flexbox/
The preferred width of a box element child containing text content is
currently the text without line breaks, leading to very unintuitive
width and flex calculations → declare a width on a box element child
with more than a few words (ever wonder why flexbox demos are all
“1,2,3”?)
Note that for your situation, it looks far easier to use display: table + table-layout: fixed: http://jsfiddle.net/thirtydot/fPfvN/1/. Though, flexbox does allow you to quickly change things around in a way that display: table can’t compete with.