cuerpo {overflow-x: oculto; } posición de rotura: pegajosa

Tengo un elemento que estoy haciendo pegajoso con la posición pegajosa:

#header {
    position: sticky;
    width: 100vw;
    top: 0;
}
<app-header id="header"></app-header>

Y eso funciona bien, pero me di cuenta de que si uso:

body {
  overflow-x: hidden;
}

Eso se rompe, y necesito configurarbody overflow-x ahidden, ¿cómo puedo solucionar eso, con solo una solución CSS, sin soluciones JS?

Respuestas a la pregunta(3)

Su respuesta a la pregunta