Nested flexboxes not growing equally

Question

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.

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: 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 styles:

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

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.

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.

I'm not sure if the best solution here is some other way of constructing the Angular section, or a different CSS solution.

EDIT adding images

What I'm getting:

What I was trying to get:

It is difficult to understand your expected behaviour, can you add an image ? — user1095118, Aug 24 '15 at 22:08

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

UPDATE:

As you are nesting the display: flex declaration it is unable to calculate the width based on the total amount of items rather calculating the widths of the number of div's based on the li

if you can remove the the li from the mix the layout should work as you intended although this would most likely involve changing your data structure.

see Adding rows with ng-repeat and nested loop to add a directive which would allow containerless syntax.

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

edited May 23 '17 at 11:51

Community

1
1

answered Aug 24 '15 at 22:19

user1095118

4,338
3
26
22

Not quite, sorry if I wasn't clear! I updated the original question with an image of the intended result. The goal was to get one single row of equal sized divs, but as far as I know I need to keep the nested structure so I can cycle through both ng-repeats. – EepMoody Aug 24 '15 at 22:44
Thanks, looks like the answer is to restructure the data and not nest things. Appreciate the help! – EepMoody Aug 25 '15 at 15:57

score 0 · Answer 2 · answered Aug 24 '15 at 22:11

Flexboxes only respect the context that they’re in. You’ll notice the first level of flexboxes are all the same width. The second level flexboxes size themselves according to the width of their container and the number of flex-items inside that container.

Containers with fewer flex-items inside will make those flex-items bigger, because there’s more room to grow.

Setting a width or min-width on the lis may get you better results, or not nesting your flex-items, but in these cases you may not need flexbox for this kind of layout at all.

Nested flexboxes not growing equally

2 Answers2