html - 如何使消息在滚动前不拉伸(stretch)

Question

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

不太好看

这就是消息无法变小后的样子

 <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

您应该尝试在 .chatbox 上使用 max-height 属性

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