Display scrollbar inside a fixed position element

Question

I have elements (.block) inside a div (#block_list). The parent of #block_list is another div (#block_list-wrapper) which has a fixed position. Now since the #block_list-wrapper has fixed position, some of the elements of the #block_list are not displayed. I would like to display them using a scrollbar.

html:

<div id="block_list-wrapper">
    <div id="handle-wrapper">
        <div id="handle">
            <i class="fa fa-chevron-right"></i>
            <i class="fa fa-chevron-left"></i>
        </div>
    </div>
    <div id="block_list">
        <div class="one_column_block-1 block">
            <img src="static/image/one_column_block-1.png">
        </div>
        <div class="one_column_block-2 block">
            <img src="static/image/one_column_block-2.png">
        </div>
        ...
        ...
        ...
        <div class="one_column_block-1 block">
            <img src="static/image/four_column_block-3.png">
        </div>
    </div>
</div>

Code demo at codepen.io

I tried adding overflow: scroll like so,

#block_list-wrapper #block_list {
    width: 250px;
    overflow: scroll;
}

but it didn't help either.

How can I show scroll bar to display all the elements (.block) inside the #block_list?

Answer 1

Add the following line of code to set the height of the element:

$("#block_list").css("height", $(window).height())

Updated CodePen

Another solution would be, obviously, to do this with CSS, like the other answers say.

Answer 2

Add height 100% to both your block_list and block_list-wrapper and then add overflow : scroll to block_list.