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

我正在构建一个由方形瓷砖组成的马赛克（

img

tags）。我正在一行一行地构建它（

ng repeat

with Angular）。 我想设置马赛克区域的

max height

和

max width

，溢出时需要滚动

在垂直方向上，它正在工作。在横向上不是；事实上，当图像室结束时，下一个图像将转到一个新行

我进入了一个引导栏

以下是我的代码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>

.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;
}