Scrollbar not scrolling completely down the page

Replacing height with min-height should fix this.

Change this:

.scroll {
    height:100%;
    overflow:scroll; 
}

To this:

.scroll {
    min-height:100%;
    overflow:scroll; 
}

not sure what the possible cause was. But just putting an extra div below the regular div solved the issue. Now i can view all the items in the above div. Please see the question itself for the answer. Might help someone in case they want to have a workaround like this.

.scroll{
height: calc(100vh - 100%);
overflow-y: scroll;
}

possible causes:

• A vertical offset like margin-top: 100px or top: 100px combined with height: 100% when using position: absolute;. In this case change to height: calc(100% - 100px);

• The same with padding-top or padding-bottom. Possible solution: box-sizing: border-box;

But without code all this is guessing...