html - Angular 可滚动的 div

Question

我想创建一个 Angular 应用程序，它在与聊天框非常相似的设计中显示 JSON 数据结构。我为“聊天框”创建了一个组件

示例结构(也是我的 chatbox.component.ts 中唯一的内容):

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

聊天框.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>

聊天框组件.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;
}

按钮本身可以忽略，它实际上只是显示结构的方式。正确的消息会像这样显示: 它还没有设计，现在也不是很重要。我能够显示 3 条消息，但如果我尝试显示 4,5 或 6 条消息，它会溢出边界(边界是固定的，大小应该保持那样)。
我的问题是:如何向 div 添加滚动条？

这也是一个示例，展示了当我尝试显示 4 条消息时它的外观:

Answer 1

首先，注意到 tr 标签的错误使用。

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

不确定为什么 tr 用于此位置。 tr 只能在 table 标签内使用。您需要将其替换为 div。另外，您需要为 .inboxContainer 添加 overflow: auto;，如下所示。

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