W pliku css, w klasie .site-nav zadeklarowana jest wysokość 20px.
W klasie .side-menu zadeklarowana jest wysokość 100%.
Ponieważ element o klasie .side-menu znajduje się wewnątrz elementu .site-nav, element o klasie .side-menu przyjmuje również wysokość 20px, czyli 100% swojego rodzica. W sumie to większą zagadką jest, dlaczego wyświetla się poprawnie zanim nastąpi scrollowanie?. W momencie scrollowania, dla elementu o klasie .site-nav, dodawana jest klasa .sticky. W klasie .sticky jest instrukcja 'position: fixed;' i to ona "psuje" całość.
Można to załatać ale ... to będzie jednak łata.
W pliku css w klasie .side-menu można zamiast 'height: 100%;' dać 'height: 100vh;' - u mnie działa :)