title: Nested flexboxes not growing equally
body: <p>I'm working on a status summary bar in Angular, and running into an issue where I can't get a flex-box based layout to look right.</p>
  
  <p>It iterates through as many categories as exist, and puts an appropriate number of blocks for each category. The structure ends up looking like in this codepen: <a href="http://codepen.io/emoody/pen/OVKjVY" rel="nofollow noreferrer">http://codepen.io/emoody/pen/OVKjVY</a></p>
  
  <p>Angular Code:</p>
  
  <pre><code>&lt;ul class="list-status"&gt;
      &lt;li ng-repeat="category in data"&gt;
        &lt;div ng-repeat="item in category"&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>SCSS styles:</p>
  
  <pre><code>.list-status{
    width: 100%; margin: 0; padding: 0;
    display: flex;
    flex-flow: row nowrap;
    li{
      display: flex;
      flex-grow: 1;
      div{
        height: 20px;
        flex-grow: 1;
        margin-right: 1px;
      }
    }
  }
  </code></pre>
  
  <p>Doesn't have to be ul/li but as far as I know there does need to be some sort of container for each repeat layer, which is where the problem comes in.</p>
  
  <p>The expected behavior is that a single row of divs should be rendered, all the same size. The result is that the categories with more items have tiny bars, and the others have lots of space between them.</p>
  
  <p>I'm not sure if the best solution here is some other way of constructing the Angular section, or a different CSS solution.</p>
  
  <p>EDIT adding images</p>
  
  <p><strong>What I'm getting:</strong>
  <a href="https://i.stack.imgur.com/xiaUZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xiaUZ.png" alt="enter image description here"></a></p>
  
  <p><strong>What I was trying to get:</strong>
  <a href="https://i.stack.imgur.com/1yViV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1yViV.png" alt="enter image description here"></a></p>