Css 角度2：手风琴中的Popover聊天窗口

我正在尝试用手风琴显示popover聊天窗口，问题是popover聊天在手风琴中显示不完美，并且不能用手风琴滚动。如何解决此问题

      <div>
          <popover-content #myPopover
           placement="right"
            popover-append-to-body="true"
             [ng2-draggable]="true">
    <button class="button_close_chat" (click)="myPopover.hide()">
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </button>
    <h3 style="color:#D25C50">Chat </h3>
           <chat></chat>
    </popover-content>


     <button type="button" class="button_transparent" [popover]="myPopover">
            <span class="btn-label">
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  x="0px" y="0px" width="15px" height="15px" margin-top="20px" viewBox="0 0 15 15" style="overflow:scroll;enable-background:new 0 0 15 15;" xml:space="preserve">

<style type="text/css">
     .stchatpc0 {
         fill: #000;
              margin-top: 20px;
    }

       .stchatpc0:hover {
            fill: red;
      }
      </style>
       <defs>
     </defs>
     <g>
     <path id="chat" class="stchatpc0" d="M13.5,0c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.4,0.6,0.4,1v9c0,0.4-0.1,0.8-0.4,1.1c-0.3,0.3-0.6,0.5-1,0.5H3l-3,3
     V1.5c0-0.4,0.1-0.7,0.4-1C0.7,0.1,1.1,0,1.5,0H13.5z M5.2,6.8V5.2H3.7v1.5H5.2z M8.2,6.8V5.2H6.8v1.5H8.2z M11.3,6.8V5.2H9.7v1.5
      H11.3z" />
       </g>
     </svg>
      </span>
      </button>
    </div>

聊天
.stchatpc0{
填写：#000；
边缘顶部：20px；
}
.stchatpc0:悬停{
填充物：红色；
}

这个html只包含svg聊天图标和弹出窗口，手风琴组的构建是在绑定到对象响应的其他组件中完成的

请帮帮我