html - 在滚动 div 中填充重复项，在边缘有效但在 chrome 中无效

Question

我在我的元素中使用 padding-bottom 来获得宽高比，但是 padding-bottom 在 overflow 中复制自身在边缘工作，但在 chrome 中不行。我能做些什么来解决这个问题，让它在 chrome 中工作？ :)

代码笔链接:https://codepen.io/mullermeck/pen/byKeWX

 .scroll {
    width: 50%;
    height: 0;
    padding-bottom: 300px;
    background-color: green;
    overflow-y: scroll;
    overflow-x: hidden;
    white-space: nowrap;
}
.test1{
    height: 0;
    width: 31.333%;
    padding-bottom: 31.333%;
    top: 0;
    background-color: deeppink;
    margin: 1% 1% 1% 1%;
    float: left;
    object-fit: cover;
}

<div class="scroll">
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
  <div class="test1"></div>
</div>

我已经做了研究，但还没有找到任何答案......这也是我在这里的第一篇文章，所以可能是错误的

Answer 1

填充底部不是合适的解决方案..也许下面的 css 可以帮助你

.scroll {
    width: 50%;
    height:300px;
    background-color: green;
    overflow: auto;
    white-space: nowrap;
}
.test1{
    height: 0;
    width: 31.333%;
    padding-bottom: 31.333%;
    top: 0;
    background-color: deeppink;
    margin: 1% 1% 1% 1%;
    float: left;
    object-fit: cover;
}