CSS position fixed moved childrens - html

Question

I'm trying to create chat just like facebook or google. I have created chat-container class which holds users list and chat boxes.
chat-container is fixed with bottom:0 and right: 0, so its position is perfect.
.chat-container {
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
}
The problem is that I am getting a lot of users from server. So, I would like to add max-height: value. When I add this property then all my chat-boxes include userslist is being misaligned.
Each chat box has class chat-box and and inside chat-body..chat-box
.chat-box {
display: inline-block;
max-width: 300px;
min-width: 100px;
}
.chat-body {
max-width: 500px;
min-width: 100px;
overflow-y: scroll;
max-height: 200px;
}
How can I solve that?
EDIT - HTML:
<div class="chat-container">
<div class="chat-box" *ngFor="let chat of openedChats; let first = first;">
<p-panel [toggleable]="true">
<p-header>
<a class="ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default" (click)="onCloseChat(chat)">
<span class="fa fa-fw fa-close"></span>
</a>
<b>{{chat.recipient.name}}</b>
</p-header>
<div class="chat-body" #chatbody>
<div *ngFor="let message of chat.messages">
<!--TODO: Get current user id | change to ngClass-->
<div *ngIf="message.sender.id != loggedUserId" class="chat-inner-message">
{{message.message}}
</div>
<div *ngIf="message.sender.id == loggedUserId" class="chat-my-message">
{{message.message}}
</div>
</div>
</div>
<hr>
<input type="text" class="chat-input" (keyup.enter)="onSendMessage(messageInput, chat.recipient.id)" #messageInput>
<button pButton type="button" label="Send" (click)="onSendMessage(messageInput, chat.recipient.id)" style="width:100%"></button>
<!--<span *ngIf='first'>{{setChatInputFocus()}}</span>-->
</p-panel>
</div>
<div class="chat-box">
<p-panel [toggleable]="true" [collapsed]="true">
<p-header>
Chat
</p-header>
<ul class="ultima-menu">
<li *ngFor="let user of visibleUsers" (click)="onUserSelected($event, user.id)" style="padding: 3%">
<div style="display: inline; cursor: pointer;">
<div>
<img style="vertical-align:middle" src="{{user?.settings?.photoSrc}}" class="circular-portrait" width="30px" height="30px"
alt="{{user.name}}">
<span>
{{user.name}} {{user.surname}}
</span>
</div>
</div>
</li>
</ul>
<hr>
<input pInputText placeholder="Search" [ngModel]="userTypeaheadText" (ngModelChange)="userTypeahedChanged($event)">
</p-panel>
</div>
</div>