嵌套的flexbox不会平等增长

Question

我正在使用Angular中的状态摘要栏，并遇到一个无法让基于弹性框的布局看起来正确的问题。

它遍历存在的多个类别，并为每个类别放置适当数量的块。结构最终看起来像这个代码：http://codepen.io/emoody/pen/OVKjVY

Angular Code：

<ul class="list-status">
    <li ng-repeat="category in data">
      <div ng-repeat="item in category"></div>
    </li>
</ul>

SCSS样式：

.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;
    }
  }
}

不一定是ul / li但据我所知，每个重复层确实需要某种容器，这就是问题所在。

预期的行为是应该渲染单行div，大小相同。结果是，具有更多项目的类别具有很小的条形，而其他类别具有很多空间。

我不确定这里的最佳解决方案是否是构建Angular部分或其他CSS解决方案的其他方法。

编辑添加图片

我得到了什么：

我想要的是什么：

Answer 1

更新：

当您嵌套display: flex声明时，它无法根据项目总数计算宽度，而是根据{div计算li的数量宽度{1}}

如果您可以从混合中删除li，则布局应该按预期工作，尽管这很可能涉及更改您的数据结构。

请参阅 Adding rows with ng-repeat and nested loop添加一条允许无容器语法的指令。

http://codepen.io/nikglavin/pen/Ejqvqe