Html 角度可滚动div

我想创建一个Angular应用程序，它以一种非常类似于聊天室的设计显示JSON数据结构。我已经为“聊天盒”创建了一个组件

示例结构（也是my chatbox.component.ts中唯一的内容）：

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>

按钮本身可以忽略，它实际上只是显示结构的方式。右侧显示的消息如下所示： 它还没有设计好，现在也不是很重要。我可以显示3条消息，但如果我尝试显示4条、5条或6条消息，它会溢出边界（边界是固定的，大小应该保持不变）。
我的问题是：如何向div添加滚动条

下面还有一个示例，显示了当我尝试显示4条消息时它的外观：

---

您可以将

溢出：自动
添加到
.inboxContainer
。
所以你会有

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

首先，注意到
tr
标记的用法不正确



发件人：{{msg.Sender}
日期：{{msg.Date}
消息：{{msg.answer}}

固定主分区高度的可能副本，并使用：
溢出：滚动属性Najam给出的解决方案对我有效。
.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;
}

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