メッセージをスクロールする前に伸ばさないようにする方法

Question

Googleのマテリアルでメッセンジャーを作成していて、メッセージをグリッドに入力すると、最初のメッセージが領域全体を占め、2番目のメッセージが追加されると、ページの半分を占めると、最後にスクロールし始めるまでメッセージが小さくならないようになるまで続きます。スクロールの自動化が機能しますが、最初は馬鹿に見えます。

あまりよくありません。これは、私はこれをどのように修正することができます

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