◆ CSS だけだと完全には無理だった
◆ 100vw はスクロールバーがあると横方向にはみ出る
◆ overflow: hidden は必要なものまで表示されなくなる
◆ スクロールバーは必要なときだけ表示したい
◆ →スクロールバーサイズを固定で減らせない
◆ right: 0 で左側にはみ出させる方法親に sticky とか基準位置が変わる要素があると使えない

ブロックの内側から画面いっぱいの線を引きたいです
ブロックの内側なので 100% は親ブロックのサイズにしかなりません

画面いっぱいだと width: 100vw が使えます
これで width が画面幅と等しくなります
しかしこれはスクロールバーも含むので スクロールバーが出る場合は少しはみ出して横方向のスクロールバーが表示されてしまいます

対処するには position: absolute をつけて right: 0 にすれば良いです
右側へのはみ出しはスクロールバーが出ますが左側へのはみ出しはスクロールバーがでません
基準が右端ならスクロールバー分は左側にはみ出します
しかしこれが使えるのは親に right の基準となる要素がない場合です
なければドキュメント全体の右端になりますが あった場合はそこの右端となります
sticky とかと組み合わせる場合は使えないことが多いです

はみ出しても表示しなければよいということで body を overflow: hidden にしてしまうこともできます
ただこれは ウィンドウを小さくして表示スべきコンテンツがはみ出た場合にも表示されなくなる
body ではなくコンテンツ側で overflow: auto を使ってスクロールバーを出すということも考えました
しかし その場合横線がスクロールバーよりも上のレイヤに来てしまうのでスクロールバーの上に線が表示されます

スクロールバーの幅を固定かつスクロールバーを常時表示するとすれば 100vw - (スクロールバーの幅)px を指定できます
しかし スクロールバーがいらないのに出てるのは見た目的に好きじゃないです
結局 JavaScript でサイズを計算して幅を指定して リサイズされれば再計算とするしか無いようです

スクロールバー出てるときに 100vw はスクロールバー含まなくていいのに