corpo {estouro-x: oculto; } quebra posição: pegajoso

Eu tenho um elemento que estou tornando pegajoso com a posição pegajosa:

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

E isso funciona bem, mas percebi que se eu usar:

body {
  overflow-x: hidden;
}

Isso quebra pegajoso, e eu preciso definirbody overflow-x parahidden, como posso corrigir isso, apenas com solução CSS, sem soluções JS?

questionAnswers(3)

yourAnswerToTheQuestion