Html 在滚动div中填充dublicate，在edge中有效，但在chrome中无效

我在我的项目中使用padding bottom来获得纵横比，但是padding bottom在溢出中复制自己在edge中工作，但在chrome中不工作。 我能做些什么来解决这个问题，让它在chrome中正常工作？：）

链接到代码笔：

。滚动{
宽度：50%；
身高：0；
垫底：300px；
背景颜色：绿色；
溢出y：滚动；
溢出x：隐藏；
空白：nowrap；
}
.test1{
身高：0；
宽度：31.333%；
垫底：31.333%；
排名：0；
背景颜色：深粉色；
利润率：1%1%1%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;
}

---

试试这个，我认为你可以去掉填充底部：300px属性和代替高度：0必须使用高度：自动

。滚动{
宽度：50%；
高度：自动；
/*垫底：300px*/
背景颜色：绿色；
溢出y：滚动；
溢出x：隐藏；
空白：nowrap；
}
.test1{
身高：0；
宽度：31.333%；
垫底：31.333%；
排名：0；
背景颜色：深粉色；
利润率：1%1%1%1%；
浮动：左；
对象匹配：覆盖；
}

不知道你的意思，也不知道它到底应该在哪里“复制”任何东西。我猜您可能只想删除

height:0；垫底：300px

来自

。滚动

…？这是一个更复杂网站的一部分，矩形div取决于宽度，它们具有一致的纵横比。我不能把一个从广度计算的var放在高位，它将从%高度而不是广度计算