使用flexbox挤压ng-repeat的项目 - angular.js/flexbox

Question

如何在使用flexbox的内容使用ng-repeat填充内容时让容器可以滚动。

问题似乎是，flexbox不会将任何高度应用于其元素。

<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/

在你看到的项目将挤在一起的小提琴。

Answer 1

在这里，您可以将flex-shrink: 0;添加到您的.item元素中，以便不会正确支持Flexbox内部元素的动态添加的浏览器。

所以，你的代码就变成了：

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