there is many ways of fixing this. This is one way..

.body {
 margin: 0;
}
.wrapper {
  width: 200px;
  height: 100vh;
  background: #ededed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

<div class="wrapper">
    <!-- logo -->
    <div class="site-logo">
        <a href="index.html"> <span class="logo-text">Seo.</span> </a>
    </div>
    <!-- Nav menu -->
    <nav>
        <ul class="vertical-menu">
            <li class="active"> <a href="#home" class="nav-link home"> <i class="las la-home"></i>Home</a> </li>
            <li> <a href="#about" class="nav-link about"> <i class="las la-user"></i>About</a> </li>
            <li> <a href="#experience" class="nav-link experience"> <i class="las la-code"></i>Experience</a> </li>
            <li> <a href="#contact" class="nav-link contact"> <i class="las la-comments"></i>Contact</a> </li>
        </ul>
    </nav>
        
    <!-- Footer -->
    <div class="myfooter">
        <p>© 2021 Made with love by me.</p>
    </div>
</div>

I made a side nav bar wrapped in a div, which has a footer inside of it.
I want the footer to touch the bottom of the “blue” div (look at the photo), and when I resize the page vertically it must stop when reaches the bottom green line I drew.
photo

In short, I need something like this: https://jthemes.net/themes/html/bolby/demo/index-dark.html

HTML

<div class="wrapper">

    <!-- logo -->
    <div class="site-logo">
        <a href="index.html"> <span class="logo-text">Seo.</span> </a>
    </div>
    <!-- Nav menu -->
    <nav>
        <ul class="vertical-menu">
            <li class="active"> <a href="#home" class="nav-link home"> <i class="las la-home"></i>Home</a> </li>
            <li> <a href="#about" class="nav-link about"> <i class="las la-user"></i>About</a> </li>
            <li> <a href="#experience" class="nav-link experience"> <i class="las la-code"></i>Experience</a> </li>
            <li> <a href="#contact" class="nav-link contact"> <i class="las la-comments"></i>Contact</a> </li>
        </ul>
    </nav>
        
    <!-- Footer -->
    <div class="myfooter">
        <p>© 2021 Made with love by me.</p>
    </div>
</div>

SCSS

.wrapper {
    border-right: solid 1px rgba(255, 255, 255, 0.1);
    padding: 50px 40px 40px;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
    height: 100vh;
    width: 290px;
    z-index: 2;

    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    .site-logo {
        font-size: 35px;
        font-weight: 700;
    }
    
    .vertical-menu {
        padding: 0;
        margin-top: 160px;
        margin-bottom: 160px;
        box-sizing: border-box;
        li {
            padding: 4px 0;
        }
        .nav-link {
            color: $primaryText;
            font-weight: 700;
            padding: 0px 0px 10px;
        }
    }

    .myfooter {
        margin-top: auto;
        p {
            color: $secondaryText;
            font-size: 14px;
        }
    }
}