Stefan Stefan - 6 days ago 4
CSS Question

items squeezed in ng-repeat with flexbox - angular.js/flexbox

How to let a container be scrollable if the content is filled with ng-repeat using flexbox.

The problem seems to be that flexbox doesn't apply any height to its elements.

<div ng-app>
<div ng-controller="Ctrl">
<div class='container'>
<div class='item' ng-repeat="item in items">
<div class='item-inner'>{{item.text}}</div>
</div>
</div>
</div>
</div>


http://jsfiddle.net/5eg2zn2d/

In the fiddle you see items get squeezed together.

Answer

Here, you can add flex-shrink: 0; to your .item element for browsers that do not properly support the dynamic addition of elements inside the flexbox.

So your code becomes:

.item {
  display: flex;
  margin: 3px;
  flex-shrink: 0;
}