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