Force Equal width columns in CSS FlexBox : <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>
