width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
この CSS により、ビューポートの正確な (100%) 寸法が得られるはずです。しかし、ページでオーバーフローが発生しているため、明らかに大きすぎます。
すべて削除したので、パディング、マージン、またはアウトラインではありません。
また、これらの寸法で 2 つのdivを追加すると、投影された寸法よりも大きくなるだけのようです。（しかし、jsfiddleでは常にそうです）
私はそれをバグと考えて回避策を書くべきですか？または、何か不足していますか？
ビューポートの測定値は正確です。問題は、div がインライン ブロックであるという事実にあります。ブラウザーはインライン ブロック要素をライン ボックスにレンダリングします。div の下の空白は、この行ボックスのベースラインから来ています。それはタイポグラフィのディセンダーが行くべき領域です。この追加のスペースが div と組み合わされて、オーバーフローが発生します。
div がブロックレベルの要素としてレンダリングされるように宣言を削除するdisplay: inline-blockと、スクロールバーがなくなり、div がビューポートに正確に収まります。
何らかの理由でこの要素をインラインブロックにする必要がある場合は、設定vertical-align: top(またはbottomまたはmiddle) を修正するようです。