title: Flexbox — Ignore wrapper for child elements
body: <p>I have a flex container that contains x elements, where each contains y children.</p>
  
  <p>I'm trying to have the container space divided equally according to the children instead of the parents.</p>
  
  <p>Currently what happens is:</p>
  
  <p>{ [ 2 children ] [ 5 children ] [ 3 children ] }</p>
  
  <p>The [] blocks are currently the same width, so it's spacious for the first one (only has 2 children), but cramped for the middle one.</p>
  
  <p>I need wrappers for styling purposes, but can't seem to get the division of space to be based on the children instead of 'parent equally then children equally'.</p>
  
  <p>I have not specified width for anything, just <code>flex: 1 0</code>, and the number of children is not static, so I can't use explicit widths.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: sans-serif;
    font-size: 8px;
    margin: 0px;
    padding: 0px;
    width: 1000px;
  }
  
  wrap,
  wrap *,
  p {
    border: 1px solid #ddd;
    margin: 10px;
    box-sizing: border-box;
  }
  
  wrap {
    height: 100px;
  }
  
  wrap,
  container,
  div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  container,
  container div,
  container div span {
    flex: 1 1;
    background-color: rgba(0, 0, 0, .125);
  }
  
  span,
  p {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;wrap&gt;
    &lt;span&gt;Flex Element Here&lt;/span&gt;
    &lt;container&gt;
      &lt;div&gt;
        &lt;span&gt;A&lt;/span&gt;
        &lt;span&gt;B&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;span&gt;C&lt;/span&gt;
        &lt;span&gt;D&lt;/span&gt;
        &lt;span&gt;E&lt;/span&gt;
        &lt;span&gt;F&lt;/span&gt;
        &lt;span&gt;G&lt;/span&gt;
        &lt;span&gt;H&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;span&gt;I&lt;/span&gt;
        &lt;span&gt;J&lt;/span&gt;
        &lt;span&gt;K&lt;/span&gt;
      &lt;/div&gt;
    &lt;/container&gt;
    &lt;span&gt;Another Flex Element Here&lt;/span&gt;
  &lt;/wrap&gt;
  &lt;p&gt;A-B &amp; I-K are roomy, while C-H is cramped. Ideally, space is divided so that these letter-boxes have the same width, while being wrapped. Number of letters is dynamic, so fixed-widths cannot be used.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>