How to place the elements of a list at the bottom of an absolute positioned parent element

Suppose you have a HTML-list and you want to place its elements at the bottom of a parent element which is positioned absolute in your website and also has a predefined height. Apart from that you also want the list to be scrollable, when not all elements can be shown inside the parent element.

Consider the following HTML code which solves these two problems:

1
2
3
4
5
6
7
8
    <div id="parentElement">
        <ul>
            <li>element one</li>
            <li>element two</li>
            <li>element three</li>
            <li>element four</li>
        </ul>
    </div>

and the following CSS code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    #parentElement {
        position: absolute;
        top: 0;
        background: red;
        width: 200px;
        height: 200px;
        overflow-y: auto;
    }
    
    #parentElement ul {
        height: 400px;
        vertical-align: bottom;
        display: table-cell;
    }
    #parentElement ul li {
        background: green;
    }

As you can see the trick to hold the list, or every other HTML element you want to use, on the bottom of a parent div is to use the combination of display: table-cell and *vertical-align: bottom properties.

The inner element should not be set to an absolute position and also it has to have the same height as its parent element.

Moreover, we made the list scrollable by defining the overflow-y: auto property on the parent element, which shows a vertical scrollbar when not all the elements of the list can be shown.

Consider the following code example from my GitHub repository which explains the previous.