CSS - Scroll bar not working - html

Question

I created chatbox UI for my Application. I want to add scroll bar for the chatbox. I added the overflow-y:auto; in chat-content div class. But it doesn't work.If I add the style in chat div class it will work both messages and input box also. But I need scroll only messages. I don't know where to add the overflow-y:auto;
Any one please find the solution for me.
Here I attached the html code for chatbox.
I followed this tutorial:
https://codepen.io/CodeFrogShow/pen/PKYvMo
html:
<div class="container_chatbot">
<div class="app">
<div class="head clearfix">
<span class="messages-notification">
<i class="fa fa-comments-o"></i>
<span class="count"></span>
</span>
<span class="title">Messenger</span>
<span class="create-new">
<a (click) = "onVisible()" class="close">
<i class="material-icons">expand_more</i>
</a>
</span>
</div>
<div class="body">
<div class="friend-list clearfix">
<ul>
<li class="active">
<span class="messages hide">
<span class="count"></span>
</span>
<img src="https://s5.postimg.org/3wnxyjz8n/image.png" alt="" />
<span class="name">
Jiffy
</span>
</li>
</ul>
</div>
<div class="chat-messages">
<div class="chat">
<div class="chat-content clearfix" >
<span *ngFor= "let message of messages_receiver" class="friend last">
{{message}}
</span>
<span *ngFor= "let message of messages_sender" class="you first">
{{message}}
</span>
</div>
<div class="msg-box">
<input type="text" [(ngModel)]= "message" class="ip-msg" placeholder="type something.." />
<span class="btn-group">
<a (click) = "send()" >
<i class="fa fa-paper-plane"></i>
</a>
</span>
</div>
</div>
</div>
</div>
</div>