title: How to force division into equal parts using flexbox
body: <p>In a dom structure like this:</p>
  
  <pre><code>&lt;div id="1"&gt;
    &lt;div id="2"&gt;
      &lt;div id="3"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="4"&gt;
      &lt;div id="5"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with css specified as:</p>
  
  <pre><code>#1{
    display: flex;
    flex-direction: row;
  }
  #2, #4{
    flex: 1;
  }
  </code></pre>
  
  <p>The divs with id 2 and 4 will be evenly distributed as long as the sum of the width of the contents in id 3 and 5 does not exceed the width of the dom with id 1.</p>
  
  <p>When the sum exceeds the width, they are not evenly distributed, and one with wider content will take up more width. How can I force 2 and 4 to take up even width using flexbox even in such cases?</p>
  
  <p>I do not want to use width specification by percent. I want to stick to flexbox.</p>