Свойство переполнения не работает, чтобы скрыть переведенный элемент ⇐ CSS

[Anonymous]

Я пытаюсь скрыть переведенный элемент с помощью overflow:hidden, но это не работает.
Свойство CSS overflow скрывает контент, выходящий за границы элемента. Когда элементы переводятся (например, с помощью Transform: Translate()), они могут выйти за пределы своего контейнера, что приведет к их скрытию, если для переполнения установлено значение «скрыто». Пожалуйста, помогите мне.
import "../styles.css"
const Header = () => {

const NavToggle = ()=>{
const element = document.getElementById('myUl');
if(element.classList.contains("active")){
element.classList.remove('active')
}
else{
element.classList.add('active')
}
}

return (

Logo

• Home
• about
• contact us
• login
• signup

)}

export default Header

html{
overflow: hidden;
font-size: 62.5%;
}

body {
width: 100vw;
height: 100vh;
overflow: hidden;
}

.header{
padding: 0 4.8rem;
height: 10rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(179, 245, 245);
width: 100vw;
overflow: hidden;
}
@media (max-width:640px){
.navbar{
z-index: 20;
background: rgb(165, 143, 143);
height: 95vh;
width: 30%;
top: 0;
position: absolute;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
right: 0;
margin-top: 4rem;
border-radius: 20%;
transform: translateX(100%);
transition: all 0.3s linear;
overflow-x: hidden;
}
.nav-list{
flex-direction: column;
}
.icon{
display: block;
}
.header.active .navbar{
transform: translateX(0);
}
.active .icon .close{
position: absolute;
display: block;
z-index: 100;
}
}````


Подробнее здесь: https://stackoverflow.com/questions/787 ... ed-element