将元素添加到水平布局，而不适合容器

Question

我正在尝试将X元素添加到水平布局中。我的目标是在元素超过视口宽度时立即显示水平滚动条。

我正在关注文档：

• https://www.polymer-project.org/docs/polymer/layout-attrs.html
• https://material.angularjs.org/#/layout/grid

但是元素正在缩小以适应视口，尽管我没有使用fullbleed参数。

我也看到了这个问题与.css有关。

我也尝试添加特定的width，但没有成功。

普伦克来重现它。

感谢！

Answer 1

这是一种方法可以做到这一点

<div id="container" style="white-space: nowrap; overflow: auto;">
  <div ng-repeat="item in divElements" style="border:solid 1px red; display: inline-block;">

Answer 2

您可以只添加最小宽度：100px或任何数字，因此不会缩小它们以适应。http://plnkr.co/edit/551uhyalZaF94AP8Mh1O?p=preview

<div ng-repeat="item in divElements" style="border:solid 1px red; min-width: 100px;">
  Created at: {{item.createdAt}}<br>
  <big-div></big-div>
</div>