Maximum height of a container?-CodePudding

I encountered an issue while using CSS or HTML to develop my first grid-based website. I looked around on the web for a while but couldn't find anything. I may not be aware of this, maybe it's a beginner issue.

Although it may not be the most effective approach to structure the website, I have an 18-row grid container. I went to add the nineteenth, but when I went to scroll down to it, it didn't appear. I inspected the website, and it was there and highlighted; but I couldn't scroll to it. Since I really can't explain it any more than that, please let me know which part of the CSS you'd like to view. Even though I know a fair amount about CSS and HTML, I thought I could use some assistance.

Here is the CSS I use for the container:

.container {
    height: 250vh;
    display: grid;

    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.75fr 0.55fr 0.5fr 0.25fr 1fr 0.25fr 0.65fr 0.2fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.25fr;
    grid-gap: 20px;
}

Here is the CSS I use for the 19th row:

.style-3 {
    background-image: url(../images/style-3.png);
    background-repeat: repeat-x;
    background-position: top;
    background-size: contain;
}  

.style-3.style-right {
    grid-column-start: 1;
    grid-column-end: 2;  
}

Here is the HTML I use for the 19th row:

            <div ></div>
            <div ></div>

Here is the CSS I use for the body:

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

The remedies I've tried include altering the div, changing the container's distribution from "fr" to "px," altering the container's height, as well as numerous other aspects and approaches to the issue, but without any luck.

Now for the question: Is there a maximum container height or row number you may exceed before it breaks? Do you have any advice on how I might get around this and make it more effective? Or is there a solution to the issue I mentioned above.

CodePudding user response：

You have hard-coded the container height to 250vh, which is why you cannot scroll down after this height. you can change the container height to see the last row

Edit: Please add the 19th row in grid-template-rows of .container in css.

.container {
  height: auto; // or something greater than 250vh

  grid-template-rows: 0.75fr 0.55fr 0.5fr 0.25fr 1fr 0.25fr 0.65fr 0.2fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.25fr 1fr; // add your 19th row here
 }