Javascript onclick获取该行数据并向div添加滚动条

我是个新手。我有两个问题。一个是将滚动条高度动态添加到div。我通过以像素为单位提供高度来添加滚动条。它工作了，但它是固定的。我希望它是动态的。所以我试着用百分比表示身高，但没有用

另一个问题是我需要用逗号将字符串拆分为新行。我尝试过使用拆分和联接函数。它只是删除逗号，而不是在新行中打印

我正在尝试从图像中实现搜索、表格和侧边细节

getdetails（x:any）{
this.detail=x.details；
this.s=this.detail.split（'，'）.join（'\n'）

.test{
溢出y：自动！重要；
身高：100%！重要；
}

日期
列表名
实体数目
{{items.date}
{{items.name}
{{items.entities}}
细节


+添加说明
{{s}

获取行数据很简单：

<tr *ngFor="let item of data | filter: search">
  .....
  <button type="button" 
    (click)='rowData(item)'
    class="btn btn-outline-secondary">
    Details
  </button>
</tr>

.test{
溢出y：自动！重要；
高度：计算（100vh-54px）；
}
：-webkit滚动条{
宽度：8px；
高度：10px；
}
：-webkit滚动条拇指{
边界半径：8px；
背景：#c2c9d2；
}

日期
列表名
实体数目
行动
{{items.date}
{{items.name}
{{items.entities}}
细节
还没有描述+添加描述
{{s}

rowData(record: any) {
   // now play with your record
}