Child divs not wrapping to stay inside parent - html

Question

Take a look at this fiddle. http://jsfiddle.net/mstwp/
The html is:
<div id="parent" style="width: 150px; display: inline-block; white-space: nowrap">
<div id="one" class="kids">
<span>Hi</span>
</div>
<div id="two" class="kids">
<span>Bob like to play on his violin</span>
</div>
</div>
with CSS:
#parent {
background-color: #aaaaaa
}
#one {
background-color: #ff0000
}
#two {
background-color: #00ff00
}
.kids {
display: inline-block;
padding: 2px;
white-space: normal;
}
How can I make div #two wrap earlier so that I can keep both child divs inside the parent div?

Answer 1

Just remove the width attached to the parent. It forces the parent div to increase its height to accomodate the content in the div #two. SO keep the parent div as such:
<div id="parent" style="display: inline-block; white-space: nowrap">
And this should do the trick for you.
Alternately, you could add a min-height to the parent div so that it automatically accomodates its width based on the content inside its child. So your parent div could look like this:
<div id="parent" style="min-width: 150px; display: inline-block; white-space: nowrap">
Hope this helps!!!
EDIT: Your child divs already wraps inside the parent div. This is 'revealed' when you add a small width to one of the child div named two.
See that here : http://jsfiddle.net/K2xn5/
If you want you div two to wrap within the parent div, then there's no point in attaching a fixed width to the parent. Instead, you will need to provide a fixed width to the div named two. This would then occupy the space AS DEFINED by the content. Your parent div would then just keep expanding based on the size of its children, in this case, div one and two.
Check out these fiddles :
Fixed width to child, no width to the parent: http://jsfiddle.net/K2xn5/1/
Child div wrapping itself based on the size of its content: http://jsfiddle.net/K2xn5/2/ and http://jsfiddle.net/K2xn5/3/
Hope this helps!!!

Answer 2

Looks to me like both child divs are being wrapped correctly? They're both inside the gray 150px parent box.
BTW this short tutorial helped me a lot with my CSS learning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/