title: body { overflow-x: hidden; } breaks position: sticky
body: <p>I have an element that I am making sticky with position sticky:</p>
  
  <pre class="lang-css prettyprint-override"><code>#header {
      position: sticky;
      width: 100vw;
      top: 0;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-header id="header"&gt;&lt;/app-header&gt;
  </code></pre>
  
  <p>And that works fine, but I realised that if I use:</p>
  
  <pre><code>body {
    overflow-x: hidden;
  }
  </code></pre>
  
  <p>That breaks sticky, and I need to set <code>body overflow-x</code> to <code>hidden</code>, how can I fix that, with only CSS solution, no JS solutions?</p>