HTML wordwrap div based on its parent

HTML

<div id="parent">
<div id="child" class="wordwrap">
asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
</div>
</div>

CSS

#parent{
  width:500px;
  height:500px;
  border:solid 1px;
  position:relative;
}



.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}