css - 相対的に配置されたコンテンツ ラッパーがコンテンツに合わせてスケーリングされない

Question

次のフィドルでは、要素「#wrap」がその内容に合わせて垂直方向にスケーリングされることを期待しています。これは明らかにそうではありません。「#wrap」がその内容に合わせて自動的に拡大縮小する (つまり、静的な高さではない) 簡単な変更を誰かが提案できますか?

フィドル

コード：

#wrap{
    display:block;
    position:relative;
    border:5px solid blue;
}

.inner{
      display:block;
      position:absolute;
      border:1px solid black;
    left:5px;
}

#id1{
    top:0px;
    height:50px;
    width:50px;
    background-color:green;
}

#id2{
    top:50px;
    height:50px;
    width:50px;
    background:red;
}

#id3{
    top:100px;
    height:50px;
    width:50px;
    background:yellow;
}

<div id="wrap">
    <div class="inner" id="id1">hi</div>
    <div class="inner" id="id2"></div>
    <div class="inner" id="id3"></div>
</div>

Answer 1

jsFidle

html:

<div id="wrap">
    <div class="inner" id="id1"></div>
    <div class="inner" id="id2"></div>
    <div class="inner" id="id3"></div>
</div>

CSS:

#wrap{
    display:block;
    position:relative;
}

.inner{
      display:block;
    position:absolute;
}

#id1{
    top:0px;
    left:5px;
    height:50px;
    width:50px;
    background:green;
}

#id2{
    top:0px;
    left:60px;
    height:50px;
    width:50px;
    background:green;
}

#id3{
    top:0px;
    left:115px;
    height:50px;
    width:50px;
    background:green;
}