来自 ng-repeat 的值在响应视图中溢出屏幕大小：AngularJS答案

【问题标题】：Values from ng-repeat are overflowing past the screen size in Responsive View: AngularJS来自 ng-repeat 的值在响应视图中溢出屏幕大小：AngularJS
【发布时间】：2019-12-16 09:53:01
【问题描述】：

我的方法的问题是当设备宽度缩小或将我的视图切换到移动视图时，芯片会溢出屏幕尺寸。我希望芯片响应地与屏幕尺寸对齐。

我尝试使用 flex 实现 div，但运气不佳。

这是代码

  <div layout="row">
    <div layout="row">
      <md-chips ng-repeat="filter in filters" readOnly="true">
        <md-chip class="chipStyling">
          {{filter.name}}
        </md-chip>
      </md-chips>
    </div>
  </div>

我创建了一个Code Pen 来展示工作示例。任何人都可以请查看并让我知道我做错了什么。

【问题讨论】：

这与我的问题无关。我不想知道设备分辨率。我需要有关我的代码的 css 部分的帮助，这应该可以解决我的问题。 @mewi
所以您希望芯片包裹而不是切断？如果是这样，只需将其包装在引导容器中 getbootstrap.com/docs/4.3/layout/overview

标签： javascript html css angularjs angular-material

【解决方案1】：

您在添加 flex 方面走在了正确的轨道上，但您还需要告诉它进行换行。在第二行，您可以添加以下 css..

display:flex;
flex-wrap:wrap;

【讨论】：

啊完美！就是这样。

【解决方案2】：

我对 Angular Material 一无所知，但仅查看文档，您似乎可以通过将 layout-wrap 添加到容器元素来添加 flex-wrap:wrap

<div layout="row">
 <div layout="row" layout-wrap>
  <md-chips ng-repeat="filter in filters" readOnly="true">
    <md-chip class="chipStyling">
      {{filter.name}}
    </md-chip>
  </md-chips>
</div>

【讨论】：