Angular scrollable div

Question

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"

Example structure (also the only content in my chatbox.component.ts):

  test = [
    { "date":"1","sender":"x","answer":"hello"},
    { "date": "2", "sender": "y", "answer": "hello my friend" },
    { "date": "3", "sender": "z", "answer": "bye" }
  ];

Chatbox.component.html :

<div class="inboxContainer">
        <tr *ngFor="let msg of test">
            <div class="wrapper">
                <div class="sender">Sender: {{msg.sender}}</div>
                <div class="date">Date : {{msg.date}}</div>
            </div>
            <div class="answer">Message: {{msg.answer}}<br></div>
        </tr>
</div>
<div class="newMessageContainer">
    <mat-form-field>
        <mat-label>New Message</mat-label>
        <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="3"></textarea>
    </mat-form-field>

</div>
<div class ="sendMessageContainer">
<button mat-button>
    Send
</button>
</div>

Chatbox.component.css :

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

The button itself can be ignored, its really just the way of displaying the structure. Right the messages get displayed like that : 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).
My question would be : How can I add a scrollbar to the div?

Heres also an example that shows how it looks when I try to display 4 messages :

Answer 1

it's working fine

   .scrollable-div {
      // width: auto;
      // height: auto;
      // height: 1000px; /* set a fixed height for the div */
      // overflow-y: scroll; /* enable vertical scrollbar */
      // margin-bottom: 200px;
    
      overflow: auto; // you can use 'overflow: scroll;' and always have reserved space for scrollabar
      width: auto;
      // height: 100vh;
       border: 2px solid red;
      // margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

Answer 2

You can add overflow: auto to .inboxContainer. So you will have

.inboxContainer {
  overflow: auto; // you can use 'overflow: scroll;' and always have reserved space for scrollabar
  width: 40vw;
  height: 60vh;
  border: 1px solid black;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Answer 3

First, noticed incorrect usage of tr tag.

<tr *ngFor="let msg of test">
  <div class="wrapper">
      <div class="sender">Sender: {{msg.sender}}</div>
      <div class="date">Date : {{msg.date}}</div>
  </div>
  <div class="answer">Message: {{msg.answer}}<br></div>
</tr>

Not sure why tr is used for this position. tr should be used inside table tag only. You need to replace it with div. Plus, you need to add overflow: auto; for .inboxContainer as the following.

.inboxContainer {
    width: 40vw;
    height: 60vh;
    border: 1px solid black;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}