如何防止CSS网格元素溢出其容器？

Question

https:/codepen.iojbautista1056penrNOrZWN。

我试图将div元素保持在容器内，在一定程度上是可行的，但是一旦达到一定数量（超过50），它就会在垂直和水平方向上溢出自己的容器。我怎样才能保证它们在超过一定数量后仍在容器内？我想用repeat(autofit,1fr)这个内容，但是我需要repeat(sizeValue,1fr)来实现这个项目的目的，所以我不能用它。

#Sketch {
    height: 800px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    background-color: white;
    border-radius: 70px;
    border: 70px solid rgba(55, 220, 205, 0.44);
    display: grid;
    grid-template-rows:  repeat(1, 1fr) ;           /*auto-fit expands to fit inside the available columns/number specified*/
    grid-template-columns: repeat(1, 1fr);     /*2nd number is how wide u want the column to be*/ 
    grid-row-gap: .3em;
    grid-column-gap: .3em;
}

.babytiles {
    height: auto;
    width:  auto;
    border: 10px rgba(0, 0, 0, 0.041) solid;
    background-color: red
}

Answer 1

在 #sketch 风格，设置。

overflow:auto;

这应该解决你的问题。