CODEWITHSUNDEEP
csspositioncss-positioncss-grid
Josemari Bautista
Josemari Bautista

Reputation: 87

How to prevent CSS grid elements from overflowing its container?

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

Im trying to keep the div elements inside of the container and it works to a certain extent, but once I reach a certain number(over 50) it overflows its own container both vertically and horizontally. How can I make sure they stay inside past a certain number? I was thinking of repeat(autofit, 1fr) the content, but I need the repeat(sizeValue, 1fr) for the purpose of this project so I can't use that.


#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
}

Upvotes: 2

Views: 1410

Answers (1)

kokila
kokila

Reputation: 294

In the #sketch style, set:

overflow:auto;

This should solve your problem.

Upvotes: 1

Related Questions