javascript - Let the height of <p> determine height of <div> -

i have paragraph of text inside <div> varies length , height. want div have minimum height of 100px, grows height of <p> increases above 80px. set css property height: 100px <div> when <p> grew beyond 80px text spills out of <div> , height of <div> remains unchanged. should do?

code:

<div id="outer_box">     <div id="box">         <p class="content"> long paragraph of content here </p>     </div> </div> 

css:

#outer_box {     width: 300px;     min-height: 100px; }  #box{     width: 300px;     min-height: 90px; } 

the div id="box" did change height contain <p> entirely, div id="outer_box" did not change height!

interested in css solution rather jquery 1 if possible, use whatever works. reason choosing pure css solution because div not exist until user mouseover. wonder how target div css have yet exist

keep min-height set on div in css, use jquery's height function figure out paragraph height. try in javascript:

$(document).ready(function(){     var h = $('div p').height();     $('div').css("height", h); });