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;
}

#child {
  margin-top: 20px;
  margin-left: 300px;
  border: solid 1px;
}

.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 */
}