あるときのこと、1000pxのコンテンツ幅から右側に装飾用の画像をpositionとrightをつかってはみ出るように位置付けしたのだが、ブラウザを1200pxからさらに縮めたとき、この装飾用の画像が右側に見切れ、ブラウザ下部にスクロールバーが表示された。
当然と言えば当然なのだが、人によっては不快に思うし、なにせタブレットなどで操作すると横にぐらぐら動き、右側に謎の空白ができてしまい見栄えも良くない。
overflow-xでhiddenにすればいいのでは？という考えもあるでしょう。
当然その方法でも問題ないかと思います。
しかし、この装飾が見切れた状態でもよい装飾（背景画像のような）であればいいと思うけど、タイトルや写真などを飾るためだとしたら、あまり好ましくない気もする。
その為、今回はあるブレイクポイントの位置からある場所までの間、装飾画像も内側に移動していくようにCSSの値を設定した。
@media print, screen and (max-width: 1200px) {
right: calc(-14.2vw + (1000px - 100vw) / 3);
}
calc()を使い、1000pxはメインコンテンツの幅、-14.2は縮まる前（1201px以上のブラウザ幅）まで固定されていた場所のポイント、3は移動する値に追加していく比率みたいなものを設定しました。
これのおかげで1200pxからブラウザ幅を狭めていくと装飾画像も内側に移動し始め、1000pxのときは無事にメインコンテンツの枠内に収まりました。
装飾画像を見切らせず生かしたいという方はこのような方法で対処するのも一つの手かと。