CSS - 滚动条不起作用

Question

我为我的应用程序创建了聊天室UI。我想为聊天框添加滚动条。我在overflow-y:auto; div类中添加了chat-content。但是它不起作用。如果我在chat div类中添加样式，它也会同时处理消息和输入框。但我只需要滚动消息。我不知道在哪里添加overflow-y:auto; 任何人请为我找到解决方案。 在这里，我附上了聊天框的html代码。

我遵循了这个教程： 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>