css - Relative positioned content wrapper not scaling to fit contents -

in following fiddle expectation element "#wrap" scale vertically fit it's contents. not case. can suggest simple modification cause "#wrap" automatically scale fit it's contents (i.e. not static height).

fiddle

code:

#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> 

because .inner div elements have position of absolute, taken out of flow of page. thus, container element no longer sees them (and cannot, therefore, expand contain them).

what setting containing div element's position relative allow absolutely-positioned .inner div elements have left, right, top, , bottom properties work off bounding box rather body element's bounding box.

if want them sit on top of each other, don't need position of elements specially since block display elements such div elements sit on own lines unless altered float or position.

thus, need rid of position properties work correctly.

updated css:

#wrap{     border:solid blue 5px; }  #id1{     height:50px;     width:50px;     background:green; }  #id2{     height:50px;     width:50px;     background:red; }  #id3{     height:50px;     width:50px;     background:yellow; } 

i've removed display: block; because div elements displayed block elements default.

see jsfiddle here.

if trying achieve different, not made clear; however, happy in comments.