sidenav 在移动设备中溢出

Question

移动导航被推出视图，因此当用户单击汉堡包图标时，它会滑入。我面临的问题是移动设备上的网站垂直溢出显示导航。我想阻止这种情况。

这是我的代码

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .navbar {
    overflow-x: hidden;
}

.header .navbar .unorderd-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 6.25rem;
    right: -18.125rem;
    width: 18.125rem;
    height: 12.5rem;
    background-color: #111;
    z-index: 1000;
    transition: all ease-in 300ms;
}

function mobileNav() {
    const hamburgerContainer = document.querySelector('.hamburger-container');
    let openNav = false;
    hamburgerContainer.addEventListener('click', () => {
        if(!openNav) {
            openNav = true;
            hamburgerContainer.classList.add('active'); 
           document.querySelector('.unorderd-list').style.right = 0;
        }else {
            openNav = false;
            hamburgerContainer.classList.remove('active');  
            document.querySelector('.unorderd-list').style.right = '-18.125rem';
        }
    });
}
mobileNav();

我试过 overflow 和 overflow-x hidden on the header element, nav element, and the unordered list，但没有任何效果。我使用可见性属性来隐藏导航，但网站仍然溢出。我希望它能解决问题，但事实并非如此。