Show li elements in div while height is less than another div

Question

I have two divs with id=left and id=right. The div with id=left contains some li elements (a list with bullets) and it is floated left. The div with id=right contains some text and html (any type of content). The problem is sometimes the left sided div (id=left) is bigger than id=right or vice versa. I want only to show, for example 10 lis on the page and then when user scroll to show another lis on the page while the height of left is less than or equal to the height of right.

A descriptive image of the problem:

EDIT: I can retreive from server a list of 1000 lis and use display: none and on scroll display: block. I don't want to load dinamically from the server the lis.

Width: #left is 250px #right is 750px.

Answer 1

As you mentioned in comments that #left has 250px width and #right has 750px width.You can get that behavior when you apply position: absolute to the #left container.

body, html {
    padding: 0;
    margin: 0;
}
.main {
    position: relative;    /* To contain #left */
}
#left {
    background-color: skyblue;
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;          /* top and bottom values are to stretch the #left inside the parent container */
    width: 250px;
}
#right {
    background-color: tomato;
    width: 750px;
    margin-left: 250px;       /* equal to #left's width */
}

Working Fiddle

NOTE: In the fiddle above, I used br tags to break the line. which I used just for fiddle purpose.