title: Force Equal width columns in CSS FlexBox
body: <p>I don't think what I'm trying to do is possible.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want all the <code>.item</code>s to take up <strong>the maximum, identical horizontal space</strong>, that is (about) 33% in the 1st one, 50% in the second one, and 100% in the last.</p>
  
  <p>The idea here is to <strong>not set the size</strong> of the <code>.item</code>s (and avoiding setting <code>id</code>s to elements) for maximum flexibility and minimum error surface ; If this is impossible with FlexBox but doable using another strategy, please share it.</p>