div inside div position is absolute parent div height not expand when child div height increased

Question

My html code have two div tag's, One div inside another div. I put value dynamically to append child div after the parent div using span tag. Child div position is absolute. When I put large data append to child div parent div is not expanding height. Child div overflow the parent div outside. How to fix this issue? My html code is:

<div id="parent" style="border:2px solid black">
    <div id="child" style="position:absolute">
    </div>
</div>

This is my jquery code:

$("#child").after("<span><p> large text data</p> </span>");

Answer 1

first find child div postion top and set to span id box postion margin-top.

here the code

<div id="parent" style="border:2px solid black">
<div id="child">
</div>
</div>

This is my jquery code:

$("#child").after("<span id="child1"><p> large text data</p> </span>");
var p = $("#child");
var position = p.position();
$("#child1").css("margin-top",position.top+"px");

its with out using position absolute.it's working fine.height problem fixed.