The parent element of the footer, .wrapper, and its respective parent elements must all have a min-height equal to the viewport height. This is most easily set with the 100vh value, including a fallback of 100% for browsers that don't support viewport units.
The .wrapper element is set to display: flex with flex-direction: column.
The element above the footer, .main, is set to flex-grow: 1 to "push" the footer to the bottom of the viewport, when its own content does not fill the screen.