CODEWITHSUNDEEP
cssangularjs
EepMoody
EepMoody

Reputation: 124

Nested flexboxes not growing equally

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: enter image description here

What I was trying to get: enter image description here

Upvotes: 0

Views: 416

Answers (2)

user1095118
user1095118

Reputation: 4496

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

Upvotes: 1

Ragdoll
Ragdoll

Reputation: 335

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.

Upvotes: 0

Related Questions