100vwで横スクロールバーが表示されてしまう問題を解決

「100vw」は「画面横幅いっぱい」を指定するcssの単位です。「100%」と似たような意味ですが、100%は「親要素」に対して100%となるのに対し、100vwは「画面サイズ」を指定できるので、たとえば「親要素の横幅が指定されている子要素に対して、画面いっぱいを指定したい」というときに便利です。

しかし100vwを使うと、Windowsで横スクロールが出現してしまうという落とし穴があります。これはWindowsだとスクロールバーの幅を画面サイズにカウントしてしまうためです。
この問題は、jqueryを使ってスクロールバーの幅を変数に代入し、その分を引くことで解決できました。

HTML

<div class="entry-content">
<div class="block-full">...</div>
</div>

<div class="entry-content">
<div class="block-full">...</div>
</div>

CSS

.entry-content{
  width: 1100px; /*任意のコンテナーの幅*/
  margin-inline: auto;
}

.block-full {
width: calc(100vw - var(--sbw));
}

.entry-content{
  width: 1100px; /*任意のコンテナーの幅*/
  margin-inline: auto;
}

.block-full {
width: calc(100vw - var(--sbw));
}

jQuery

※jQueryを読み込んでいない場合は、あらかじめCDNなどで読み込んでください。
WordPressの場合は読み込まれています。WordPress用に「$」を「jQuery」としています。

<script>
jQuery(function() {
  function setScrollbarVar() {
    var sbw = window.innerWidth - document.documentElement.clientWidth;
    document.documentElement.style.setProperty('--sbw', sbw + 'px');
  }
  setScrollbarVar();
  jQuery(window).on('resize orientationchange', setScrollbarVar);
});
</script>

<script>
jQuery(function() {
  function setScrollbarVar() {
    var sbw = window.innerWidth - document.documentElement.clientWidth;
    document.documentElement.style.setProperty('--sbw', sbw + 'px');
  }
  setScrollbarVar();
  jQuery(window).on('resize orientationchange', setScrollbarVar);
});
</script>

上記のjQueryをfooterの直前などに追加すると、自動的にスクロールバーの幅が読み込まれ、「–sbw」というCSS変数の値として追加されます。
そうすると、.block-fullで指定された「width: calc(100vw – var(–sbw));」というプロパティの数式が動き、例えばスクロールバーの横幅が15pxなら「width: calc(100vw – var(15px));」となり、横スクロールバーが表示されなくなります。
お困りの方はお試しください！

余談ですが、応急処置的にとりあえず横スクロールを切りたい場合は、以下のCSSプロパティでも実現可能です。　※ただし以下の方法では、見た目上消すだけで根本的には解決しないので注意。

html, body {
  overflow-x: clip; /* overflow-x: hidden; でも可 */
}

html, body {
  overflow-x: clip; /* overflow-x: hidden; でも可 */
}