时间戳

首页 > 解决方案 > 如何防止 CSS 网格元素溢出其容器？

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

问题描述

https://codepen.io/jbautista1056/pen/rNOrZWN

我试图将 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
}

标签： csspositioncss-positioncss-grid

解决方案

在#sketch样式中，设置：

overflow:auto;

这应该可以解决您的问题。

推荐阅读