title: A CSS flexbox issue, need to arrange multiple containers with same width
body: <p>I have a footer menu with multiple blocks. </p>
  
  <p>A <code>block-menu-block</code> with a menu with 1 to 3 unordered list items (<code>.menu-block-2 .menu li</code>).</p>
  
  <p>And multiple <code>.block-block</code> items.</p>
  
  <p>What i want, is the footer to assign the same width to the <code>.block-menu-block ul.menu li</code> and <code>block-block</code> items. So if the footer is like the example, then 25% width to every items. And if the menu is like the code block, but three <code>.block-block</code> items, then assign 20% to every items.</p>
  
  <pre><code>-[region-footer]-----------------------------------------
  |             |             |             |             |
  |ul.menu.li 1 | ul.menu.li 2|block-block-2|block-block-1|
  |             |             |             |             |
  |             |             |             |             |
  ---------------------------------------------------------
  
  \------ block-menu-block---/
  </code></pre>
  
  <p>every of the four blocks should be 25%</p>
  
  <pre><code>-[region-footer]-------------------------------------------------------
  |             |             |             |             |             |
  |ul.menu.li 1 | ul.menu.li 2|block-block-3|block-block-2|block-block-1|
  |             |             |             |             |             |
  |             |             |             |             |             |
  -----------------------------------------------------------------------
  </code></pre>
  
  <p>Every of the blocks should be 20%</p>
  
  <pre><code>&lt;div class="region region-footer"&gt;
    &lt;div id="block-menu-block-2" class="block block-menu-block"&gt;
      &lt;div class="content"&gt;
        &lt;div class="menu-block-wrapper menu-block-2 menu-name-menu-footer parent-mlid-0 menu-level-1"&gt;
          &lt;ul class="menu"&gt;
            &lt;li class="first expanded menu-mlid-734"&gt;&lt;span class="nolink"&gt;Headline&lt;/span&gt;
              &lt;ul class="menu"&gt;
                &lt;li class="first leaf menu-mlid-735"&gt;&lt;a href="http://google.com"&gt;One page&lt;/a&gt;&lt;/li&gt;
                &lt;li class="last leaf menu-mlid-736"&gt;&lt;a href="http://google.com"&gt;Another page&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="last expanded menu-mlid-785 social-menu-block"&gt;&lt;span class="nolink"&gt;Social links&lt;/span&gt;
              &lt;ul class="menu"&gt;
                &lt;li class="first leaf menu-mlid-784"&gt;&lt;a href="http://facebook.com" class="social-facebook"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                &lt;li class="leaf menu-mlid-787"&gt;&lt;a href="http://linkedin.com" class="social-linkedin"&gt;Linkedin&lt;/a&gt;&lt;/li&gt;
                &lt;li class="leaf menu-mlid-786"&gt;&lt;a href="http://twitter.com" class="social-twitter"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                &lt;li class="last leaf menu-mlid-788"&gt;&lt;a href="http://youtube.com" class="social-youtube"&gt;Youtube&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="block-block-2" class="block block-block"&gt;
      &lt;h2&gt;Some content&lt;/h2&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oporter.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="block-block-1" class="block block-block"&gt;
      &lt;h2&gt;Website info&lt;/h2&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;Address 9&lt;/p&gt;
        &lt;p&gt;Zip city&lt;/p&gt;
        &lt;p&gt;Tlf. +45 12 34 56 78&lt;/p&gt;
        &lt;p&gt;CVR 123 456 78&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>