CSS - Flex Sidebar - full height of the page - Weebly

I have been working on a Weebly website: https://testerbuyer.weebly.com/

The issue is the sidebar menu on the left.

If the sidebar menu has only a few menu items, the sidebar covers full height of the page and sticks to the page. If the menu has many items like mine does, the sidebar starts moving with the page with is totally fine, but al least I need to stretch it to full height of the content.

So I'm trying to get the sidebar to cover the full height of the page's content.

The sidebar is set in flex, so I've been trying to use all kinds of tutorials I could find on setting the sidebar full heigh, there are a few, but I just can't seem to be able to make it working.

Currently the sidebars min-height property is set to be 100vh.

I've been trying min-height: 100%, flex: 1; nothing seems to strech it full height.

How could I fix this?

I have edited some of your CSS code below here, first I am rewriting position absolute to fixed and min-height to the height and then add overflow scroll property, I hope your problem solved.

@media screen and (min-width: 64.0625em){
    body.nav-position-sidebar .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        padding: 40px;
        border-bottom: none;
        /* display: flex; */
        /* flex-direction: row; */
        overflow: auto;
    }
}