幅(width)固定の親要素タグ内の子要素タグ幅を親要素幅より大きく(width=100%)する方法

webページをマークアップしてるとたまに固定幅の親要素タグ内で親要素より大きい幅の子要素エリアをマークアップしたい時があります。
親要素タグ外に出すのも一つの方法ですが、そのまま親要素タグ内で子要素タグ幅を親要素幅より大きく表示させたい時に使えます。

親要素（class=oyayoso）と子要素（class=koyoso）のCSSの記述

※子要素の幅をビューポートパーセンテージを指定してます。必要に応じて書き換えてください。

<style>
body{
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  padding: 0;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  font-size: 24px;
}
.oyayoso{
  width: 400px;
  background-color: #cccccc;
  text-align: center;
  padding: 40px 0;
  margin: 0 auto;
  position: relative;
}
.koyoso{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 20px -50vw 0 -50vw;
  background-color: #f4ce47;
}
</style>

HTML記述

<h1>親要素タグ(width:400px)エリア内に子要素タグ(width:100%)を入れて、親要素幅より子要素幅を大きく表示してます。</h1>

<div class="oyayoso">
  親要素エリア(width:400px)
  <div class="koyoso">子要素エリア(width:100%)</div>
</div>

デモページ

幅width固定の親要素タグの子要素タグ幅を親要素より大きく（width=100％）するデモ

※流用される場合は自己責任でお願いします。
　タグ内のGoogleアナリティクスタグは流用しないで下さい。