What is a way to fit content without changing the height of the container and not have overflow hidden

Issue

const Sheet = [
        {
            "Code": "A-0-1", 
            "UPC": "4009803054728",
            "Title": "U.S.S",
            "Price": "$34",
            "InStock": "7"
        }
]

const productsEl = document.querySelector(".Sheet");

function getProducts() {
    Sheet.forEach((product) => {
        productsEl.innerHTML += `<div class="productContainer">
            <div class="img">
                <img src=${product.imgSrc} alt="" height="170px;" width="170px">
            </div>
            <div class="itemdesc">
                <h2 class="itemName">${product.Title}</h2>
                <h4 class="price"><span>${product.Price}</span></h4>
                <div class="desc">
                    <p>${product.Code}</p>
                </div>
                <div class="stock">
                    <p> Available ${product.InStock} </p>
        </div>
    </div>`;
    })
}
getProducts()

.Sheet {
    margin-top: 100px;
    margin-left: 50px;
    display: grid;
    grid-template-columns: repeat(5, 250px);
    grid-template-rows: minmax(200px, max-content) repeat(auto-fill, 190px);
    row-gap: 80px;
}
.productContainer {
    display: block;
    margin: 0 auto;
    border: 1px solid lightgrey;
    width: 200px;
    max-height: 230px;
    border-radius: 5px;
    padding: 5px;
    height: fit-content;
}

    <div class="Sheet">
    </div>

I have thousands of those Objects with different amount of wording. Obviously longer titles take more space therefore the text comes out of the container or the container gets bigger. How do I keep the container the same size and not have overflow? I need to wrap in the container and keeps its size so the page looks consistent.

Solution

if you really wanna keep the container the same size, then you maybe should use overflow: hidden; or overflow: scroll on your cantainer. but you can also play with your image size to give the content more space.

Answered By - Navab Rahimi