使用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;
}