html - フローティングの子を持つ絶対配置ラッパーは、その親よりも拡大しません

Question

私の質問はこの質問の複製ですが、これには純粋な CSS ソリューションが必要であり、JS を使用して修正することはできません。だからここに私の質問があります：

1. ラッパーは絶対配置されており、親に限定されるべきではないのに、なぜ展開されないのですか?
2. なぜそれは親にぴったり合うのですか?! 浮いた子に問題があれば全然伸びないはず！

CSS:

#parent{
    position: relative;
    height: 200px;
    width: 60px;
    background: red;
}

#wrapper{
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
}

#wrapper > div{
    float: left;
    width: 30px;
    background: yellow;
    margin: 1px;
}

HTML:

<div id='parent'>
    <div id='wrapper'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

これがJSiddle デモです。