스크롤하기 전에 메시지를 늘리지 않는 방법

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

당신은 내가 당신을 생각하는 당신은, HTML에 직접 CSS와 JS를 넣어 것 같습니다, 질문을하는 동안 당신은 다른 코드 블록으로 해당 코드를 입력 .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; 
}