html - 子のパディング/ボーダーが親からオーバーフローしないようにする

Question

jsbin.comの問題のデモ

パディングとボーダーを含め、子を親に完全に含める必要があります。

デモのように、子の幅を 100% に指定できるソリューションが必要です。

スクリーンショット

HTML

<div class="container">
  <div class="child">
    some content
  </div>  
</div>

CSS

.container {
  max-width:400px;
  padding:0px;
  border:1px solid green;
}

.child {
  padding: 10px; 
  width:100%;
  border:30px solid #f2f2f2;
  text-align:right;
}