如何在滚动之前使消息不拉伸

Question

我们正在使用Google的材料创建一个信使，并且遇到麻烦，如果您向网格输入消息，第一条消息将填满整个区域，当添加第二条消息时，两条消息将占据网页的一半，这一直持续到消息不能变小，直到它最终开始滚动。然后向下滚动的滚动自动化工作，但它在开始时看起来很愚蠢。

不太好看

一旦消息变小，这就是它的样子

 <div class="mdl-tabs__panel is-active chatbox" id="newest-panel">

       <section class="mdl-grid chatdiv">

          <div class=" chat mdl-cell mdl-cell--3-col mdl-cell--7-col-tablet mdl-cell--11-col-desktop">
            <div class="NameOfSender">Anton</div>
            <div class="ChatMessage">Inwiefern beeinflusst das autonome Fahren meinen Alltag?</div>
            <div class="Timestamp">- vor 3 min</div>
          </div>

    .chatbox{

  position: fixed;
  width: 100%;
  height: 81vh;  
  padding-bottom: 1px;
  overflow-y: scroll;
}

.chatdiv{

  position: fixed;
  width: 100%;
  height: 50vh;   
  overflow-y: scroll;
}

$("#messagefield").stop().animate({ scrollTop: $("#messagefield")[0].scrollHeight}, 1000);

我该如何解决这个问题？ 重要说明：新消息是通过javascript动态添加的！

提前致谢！

Answer 1

您应该尝试使用max-height

上的.chatbox属性

.chatbox {
  position: fixed;
  width: 100%;
  height: 81vh;
  max-height: /*whatever suits*/; /* <-- Here is the fix*/
  padding-bottom: 1px;
  overflow-y: scroll;
}

.chatdiv {
  position: fixed;
  width: 100%;
  height: 50vh;
  overflow-y: scroll;
}