The dropdown list overlaps the footer. How to get around the problem?

Question

css

Hello everyone.
Surely, many of you have encountered a similar problem. Codepen example below:
https://codepen.io/anon/pen/LywWEo
Regular page layout with header, content and footer.
The problem is that when expanded, the dropdown list goes off the page.
The default <select>browser opens to the top if there is not enough space at the bottom.
But I would like to know if it is possible to solve the problem by tweaking the page layout.
Or some other solution.
Thank you.
*** UPD ***
in general, I decided to just open up if the drop-down list does not fit below

Answer 1

Here you go