http://jsbin.com/xabarusote/edit?html,css,output

子をabsoluteにして、その子を持てるように親もrelativeにしたら
望み通りのサイズになりました
何故absoluteにしたら、%指定していても親の実サイズを元に計算されるのか、よく分かりませんが
これはCSSの仕様通りなのでしょうか？