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 (both occupying 50% of the total width of their parent flexbox). But when content is added to the children, their width changes (depending on what the content is and padding)! Why does this happen?

CSS:

.hasFlex {
   display: box;
   display: -webkit-box;
   display: -moz-box;
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;}
.box0 {
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;}
.box1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;}
.box2 {
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;}
.box3 {
   -webkit-box-flex: 3;
   -moz-box-flex: 3;
   box-flex: 3;}
.container {
margin-bottom: 10px;
}

HTML:

<div class="container hasFlex">
<div id="main" role="main" class="box1">
    <div class="innerBG">
      a bunch of stuff (divs, text, etc) go here
    </div>
</div>
<div id="sidebar" class="box1">
    <div class="innerBG">
       a bunch more stuff (divs, text, etc.) go here
    </div>
</div>
</div>

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.