填充最大宽度后添加图像并开始水平滚动

Question

我正在构建由方形图块（img标签）组成的马赛克。我正在逐行构建它（ng-repeat与Angular）。 我想设置马赛克区域的max-height和max-width，当溢出时我需要滚动。

垂直地，它正在发挥作用。水平不是;事实上，当图像的空间结束时，下一个图像将转到新的一行。

我进入了Bootstrap专栏。

这是我的代码HTML代码：

<div class="mosaic-container">
  <span ng-repeat="line in mosaic.lines" class="mosaic-line">
    <span ng-repeat="element in line" class="mosaic-square">
      <img ng-src="mosaic_{{coordinates}}.jpeg" class="mosaic-image">
    </span>
    <br>
  </span>
</div>

和CSS代码：

.mosaic-container {
  overflow-y: auto;
  max-height: 520px;
  max-width: 730px;
  overflow-x: auto;
}

.mosaic-line {
  display: inline-block;
  width: 100%;
}

.mosaic-square {
  display: inline-block;
  position: relative;
}

.mosaic-image {
  max-width: 42px;
  z-index: 0;
}