Html 图像元素转到Div中的新行

如果图像数量超过div的宽度，我会尝试让div水平滚动。不幸的是，在尝试了堆栈上的所有内容后，一旦图像数量超过div的宽度，就会将其推到新行，而不是继续在同一行上滚动。下面是车把模板和sass

模板：

{{#if isMoreColours}}
<div class="facets-item-cell-grid-colourway">


    {{#each option}}
        <div class="item-colourway-wrapper">
            <img class="facets-item-cell-colourway-img" src="{{resizeImage this.url 'thumbnail'}}" alt="{{this.altimagetext}}" itemprop="image"/>
            <p>{{this.colour}}</p>
        </div>
    {{/each}}


</div>
{{/if}}

{{#if ismorecolors}
{{{#每个选项}}
{{this.color}}

{{/每个}}
{{/if}

只需更换

浮动：左侧带
显示：内联块在
中。项目配色包装器



.colorway扩展包装器{
位置：绝对位置；
底部：0；
最大高度：185像素；
宽度：100%；
溢出：隐藏；
}
.facets项目单元格网格颜色{
高度：185px；
背景：rgba（0,0,0,1）；
溢出-x：滚动；
溢出y：隐藏；
宽度：自动；
最大高度：185像素；
空白：nowrap；
}
.项目配色包装{
最大宽度：100px；
宽度：100px；
显示：内联块；
右边距：10px；
文本对齐：居中；
文本转换：大写；
字体重量：较轻；
背景：#FFF；
}

颜色

颜色

颜色

颜色

颜色

颜色

颜色

颜色

使页面/div元素宽度大于100%的唯一方法是对其应用固定宽度，宽度大于100%，或者仅在其中使用
内联块，并应用
空白：nowrap到容器。
如果你提供了一个测试，它将很容易测试。@raul.vila添加了一个类似于符咒的小提琴作品。谢谢
{{#if isMoreColours}}
<div class="facets-item-cell-grid-colourway">


    {{#each option}}
        <div class="item-colourway-wrapper">
            <img class="facets-item-cell-colourway-img" src="{{resizeImage this.url 'thumbnail'}}" alt="{{this.altimagetext}}" itemprop="image"/>
            <p>{{this.colour}}</p>
        </div>
    {{/each}}


</div>
{{/if}}