[css]スクロールバーを除外したブラウザ幅を指定する方法

PC向け

課題

ページの高さがブラウザサイズを超えていた場合、縦向きのスクロールバーが出現する。
このとき100vwはスクロールバー分を含んだ幅の指定になるから、表示領域以上の幅を指定していることになるから、横向きのスクロールバーが出現する。

スマホのブラウザのアドレスバーとかへの対応はできるようになったのに、PCにはそれがない。
古くからjsでの対応策やoverflow:hidden;で無理やり見なかったことにするとかで生きていくしかなかった。

知らんうちに真っ当な手法でCSSだけでやっていけるようになったみたい。

<body>
    <div class="sample"></div>
</body>

body{
    container-type: inline-size;
}
.sample{
    width: 100cqw;
}

親コンテナ（body）を基準にして、その幅いっぱい（100cqw）を指定することで対応できる。

コンテナクエリというらしい。

すごく助かる。

ブラウザ幅基準だと@mediaでリキッドレイアウトを組んでいたけど、コンテナを指定できることから@containerで指定要素の幅による切り替えができるようになってた。

必要な場面に出くわしたことはないけど、作り込みが必要な際に結構助かるんじゃないだろうかと思います。