title: Angular scrollable div
body: <p>I want to create an Angular App which displays a JSON data structure in a design which is very similar to a chatbox. I've created a component for the "chatbox"  </p>
  
  <p>Example structure (also the only content in my chatbox.component.ts):</p>
  
  <pre><code>  test = [
      { "date":"1","sender":"x","answer":"hello"},
      { "date": "2", "sender": "y", "answer": "hello my friend" },
      { "date": "3", "sender": "z", "answer": "bye" }
    ];
  </code></pre>
  
  <p>Chatbox.component.html :</p>
  
  <pre><code>&lt;div class="inboxContainer"&gt;
          &lt;tr *ngFor="let msg of test"&gt;
              &lt;div class="wrapper"&gt;
                  &lt;div class="sender"&gt;Sender: {{msg.sender}}&lt;/div&gt;
                  &lt;div class="date"&gt;Date : {{msg.date}}&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="answer"&gt;Message: {{msg.answer}}&lt;br&gt;&lt;/div&gt;
          &lt;/tr&gt;
  &lt;/div&gt;
  &lt;div class="newMessageContainer"&gt;
      &lt;mat-form-field&gt;
          &lt;mat-label&gt;New Message&lt;/mat-label&gt;
          &lt;textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
              cdkAutosizeMaxRows="3"&gt;&lt;/textarea&gt;
      &lt;/mat-form-field&gt;
  
  &lt;/div&gt;
  &lt;div class ="sendMessageContainer"&gt;
  &lt;button mat-button&gt;
      Send
  &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Chatbox.component.css :</p>
  
  <pre><code>.inboxContainer {
      width: 40vw;
      height: 60vh;
      border: 1px solid black;
       margin: auto;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
  }
  .newMessageContainer {
       margin: auto;
       position: absolute;
       top: 80vh;
       left: 30vw;
       bottom: 0;
       right: 0;
  }
  .mat-form-field {
    width: 30vw;
    top:0.1vh;
  }
  .mat-button {
      left: 4vw;
      top:1.4vh;
      background-color: #B29B59;
  }
  .sendMessageContainer {
          margin: auto;
          position: absolute;
          top: 80vh;
          left: 60vw;
          bottom: 0;
          right: 0;
  }
  .wrapper {
    display:flex;
  }
  .date {
    border:1px solid black;
    width: 20vw;
    border-right:none;
    border-left:none;
  }
  .sender {
  border:1px solid black;
  width: 20vw;
  border-left:none;
  }
  .answer {
  width: 38.8vw;
  height: 18vh;
  }
  </code></pre>
  
  <p>The button itself can be ignored, its really just the way of displaying the structure. Right the messages get displayed like that :
  <a href="https://i.stack.imgur.com/mfbqV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mfbqV.png" alt="Chat"></a>
  Its not designed yet and its not really important right now. Im able to display 3 messages but if I try to display 4,5 or 6 messages it overflows though the border (the border is fixed and the size should stay like that).<br>
  My question would be : How can I add a scrollbar to the div?</p>
  
  <p>Heres also an example that shows how it looks when I try to display 4 messages : 
  <a href="https://i.stack.imgur.com/xJVcT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xJVcT.png" alt="enter image description here"></a></p>