CSS位置固定移动儿童

Question

我正在尝试像facebook或google一样创建聊天。我创建了一个包含用户列表和聊天框的聊天容器类。

chat-container已修复为bottom:0和right: 0，因此其位置非常完美。

.chat-container {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 5px;
}

问题是我从服务器获得了大量用户。所以，我想添加max-height:值。当我添加此属性时，我的所有聊天框都包含用户列表未对齐。

每个聊天框都有类聊天框，并且在聊天室内...聊天框

.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;
}

我该如何解决？

编辑 - 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>