title: CSS Flexbox issue: Why is the width of my flexchildren affected by their contents?
body: <p>The 2 children of my flexbox are each given a style of <code>box-flex: 1</code>. My understanding is that their widths should then be <strong>equal to each other</strong> (both occupying <strong>50%</strong> 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?</p>
  
  <p>CSS: </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container hasFlex"&gt;
  &lt;div id="main" role="main" class="box1"&gt;
      &lt;div class="innerBG"&gt;
        a bunch of stuff (divs, text, etc) go here
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="sidebar" class="box1"&gt;
      &lt;div class="innerBG"&gt;
         a bunch more stuff (divs, text, etc.) go here
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>