Overflow-y not working? - html

Question

I've never had this problem before, but for some reason my container here won't auto wrap the text when I use overflow.
The entire document is here: http://codepen.io/Peechiee/pen/RNMRLy?editors=110
But here's just the part I'm referring to:
.top-friend-statuses
{
float:right;
background-color:#eeeeee;
width:33%;
height:auto;
margin-top:1%;
padding:1%;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.top-friend-status-image
{
height:100px;
width:100px;
float:left;
margin-left:2%;
}
.top-friend-status-post
{
height:110px;
width:100%;
background-color:DARKGREY;
margin-top:1%;
margin-bottom:1%;
padding-top:1.6%;
padding-bottom:1%;
}
.top-friend-status-input
{
float:left;
height:100px;
width:53%;
overflow-x:hidden;
overflow-y:auto;
background-color:LIGHTGREEN;
font-size:9pt;
}
.top-friend-status-add-message
{
display:inline-block;
background-color:RED;
height:30px;
width:30px;
font-size:8pt;
overflow:hidden;
margin-top:0%;
margin-left:3%;
float:right;
}
.top-friend-status-mood
{
background-color:VIOLET;
height:auto ;
width:30%;
float:left;
font-size:9pt;
}
And here's the HTML
<div class="top-friend-statuses">
<div class="top-friend-status-post">
<img src="http://placehold.it/100x100" class="top-friend-status-image">
<div class="top-friend-status-input">
fll;dkgj;lkdgkldhjdgkldlgkdj;gk;djlkgdj;gjldkj;ksd;slgkj;ldkg
</div>
<div class="top-friend-status-add-message">
DERP
</div>
</div>
</div>
I've tried looking up different solutions but none of them are similar to the problem I'm facing with this. Please help D:

Answer 1

Add a word-break: break-word; to your top-friend-status-input class
so your .top-friend-status-input class would look like this:
.top-friend-status-input
{
word-wrap: break-word;
float:left;
height:100px;
width:53%;
overflow-x:hidden;
overflow-y:auto;
background-color:LIGHTGREEN;
font-size:9pt;
}