How to make the scroll responsive when the user zooms in?

I'm making a copy of Spotify, in this specific case the problem is in the panel on the right side.

The problem is in the container of the Playlists that are created, if I leave the container the same as height: 100vh and overflow-y: auto that would be correct, the layout explodes because of the other items in it.

However, if you change the height and the user zooms in, the container will obviously not be 100% at the height of the screen.

With that I had to make @breakpoints for each zoom percentage of the screen.

Is there a more elegant and responsive way to do this?

PLAYLIST COMPONENT:

export const ListContainer = styled.ul`
    height: 53.3vh;
    overflow-y: auto;
    flex-direction: column;
    background-color: blue;

    @media only screen and (min-width: 0px) {
        height: 38vh;
    }

    @media only screen and (min-width: 640px) {
        height: 23.5vh;
    }

    @media only screen and (min-width: 747px) {
        height: 34.5vh;
    }

    @media only screen and (min-width: 896px) {
        height: 45.5vh;
    }

    @media only screen and (min-width: 1019px) {
        height: 52vh;
    }

    @media only screen and (min-width: 1121px) {
        height: 53.5vh;
    }

    @media only screen and (min-width: 1245px) {
        height: 58vh;
    }

    @media only screen and (min-width: 1401px) {
        height: 63vh;
    }

    @media only screen and (min-width: 1494px) {
        height: 65vh;
    }

    @media only screen and (min-width: 1681px) {
        height: 69vh;
    }

    @media only screen and (min-width: 2242px) {
        height: 76.5vh;
    }

    @media only screen and (min-width: 3363px) {
        height: 84.5vh;
    }

    @media only screen and (min-width: 4484px) {
        height: 88vh;
    }
`;

PANEL COMPONENTE:

import styled from 'styled-components';
import { size } from 'polished';

export const NavContainer = styled.nav`
    ${size('100vh', '14.375rem')}
    display: flex;
    flex-direction: column;
    background-color: ${({ theme }) => theme.colors.black};
`;

export const NavHeader = styled.header`
    padding: 1.5rem 1.5rem 1.6rem 1.5rem;
`;

export const NavSection = styled.section`
    // @TODO QUEBRAR EM COMPONENTE
    ul#tst1 {
        li {
            display: flex;
            align-items: center;

            &:nth-child(-n + 3) {
                height: 2.5rem;
                padding: 0 1.5rem;
            }

            &:nth-child(n + 4) {
                height: 2.125rem;
                padding: 0.3125rem 1.5rem;

                div {
                    ${size('1.5rem', '1.5rem')}
                    display: flex;
                    justify-content: center;
                }
            }

            &:nth-child(4) {
                margin-top: 1.5rem;

                div {
                    background-color: ${({ theme }) => theme.colors['grey-light-1']};
                }
            }

            &:nth-child(5) {
                div {
                    background: linear-gradient(135deg, #450af5, #85a099);
                }
            }

            span {
                margin-left: 1rem;
                font-family: 'Spotify-Bold';
                font-size: ${({ theme }) => theme.sizes.font['SMALL-2']};
                font-weight: 700;
                color: ${({ theme }) => theme.colors['grey-light-1']};
            }
        }
    }

    hr {
        height: 0.0625rem;
        margin: 0.5rem 1.5rem 0.75rem 1.5rem;
        border: none;
        background-color: ${({ theme }) => theme.colors['grey-dark-2']};
    }

    div#kk {
        //height: 30px;
    }
`;

export const NavFooter = styled.footer`
    ${size('2.5rem', '14.375rem')}
    position: fixed;
    bottom: 0;
    margin-bottom: 5.7rem;
    padding-right: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: ${({ theme }) => theme.colors.black};

    @media only screen and (max-width: 639px) {
        display: none;
    }

    // @TODO QUEBRAR EM COMPONENTE
    div {
        display: flex;
        align-items: center;

        &:hover {
            span {
                color: ${({ theme }) => theme.colors.white};
            }
        }

        span {
            padding-left: 0.25rem;
            font-family: 'Spotify-Bold';
            font-size: ${({ theme }) => theme.sizes.font['SMALL-2']};
            font-weight: 700;
            color: ${({ theme }) => theme.colors['grey-light-1']};
        }
    }
`;