CSS Flexbox issue: Why is the width of my flexchildren affected by their contents?

Question

The 2 children of my flexbox are each given a style of box-flex: 1. My understanding is that their widths should then be equal to each other (b

Answer 1

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.