最初に結論
内側の要素に下記のようなスタイルをかけると実現できます。
.inner {
width: 100vw;
margin-left: calc(calc(100% - 100vw) * 0.5);
}
サンプルのCodePen。
See the Pen Untitled by Kaitou (@kaitou1192) on CodePen.
なんでこんな話をするのか？
HTML&CSSの最初の段階で、大枠のページ幅や画面幅を制御するためにwrapper要素を設定することがありますが、後々の改修で打ち出し画像エリアや、ナビゲーションの幅は、そのwrapper要素の幅より大きくしたいということを稀に良く依頼されます。
仮にそのはみ出る要素がwrapper要素の上や下であれば、wrapper要素の外に出してしまうという手もありますが、真ん中あたりに出てきてしまうと、wrapper要素を分割するわけにもいかず…… 途方に暮れることも。
JSで頑張ってやるという手もあるのですが、その場合はwindow resizeと組み合わせることになるため、もっさりした挙動になってしまいがちです。
そんなときに、CSSだけでさっとやる方法があると便利なわけです。
ポイント
固定幅要素はpx、全幅の要素はvwのため、固定幅のものを下回った場合に挙動が怪しくなりがちのため @media で、固定幅の要素を下回らないようにしています。ここは Math.max() とかを使っても上手く作れそうな気もしますが、一旦メディアクエリーで対処しています。