如何防止子元素超出其父元素的固定宽度？

Question

我想为父元素设置固定宽度，并想在其中添加长文本。但是，当文本的长度大于其父级的宽度时，它仅超过其父级的宽度，而不移动到下一行。

所以我要做的是制作一个灵活的盒子，将其上下文保持在其固定宽度长度内（当然，盒子的高度可以根据行数而改变。）

这是一个简单的代码。

<style type="text/css">
.wrap {position:relative; width:500px; border:1px solid red;}
.child {width:50%; padding:5px;  border:1px solid blue;}
</style>

<div class="wrap">
<div class="child">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>