Angular：展开子元素时保持Div滚动条位置的技术问询

场景说明 #

我用一个设置了overflow: auto和flex-direction: column-reverse的DIV作为日志容器，让日志条目按时间顺序从下到上显示：

• 每条日志提取line.text内容展示；
• 若日志包含line.JSON结构，会显示一个按钮，点击可切换显示/隐藏格式化后的JSON代码（放在<pre>元素中）。

当前问题 #

点击按钮展开日志条目时，页面文本会上移，最终滚动位置定位到<pre>元素的底部，严重影响使用体验。推测是flex-direction: column-reverse属性导致的滚动行为异常。

预期行为：展开时滚动条向下扩展，用户能始终看到触发操作的按钮，仅展开的<pre>元素向下延伸。

尝试过的无效方案 #

曾尝试通过设置scrollTop调整位置，但效果不佳，代码如下：

if(logContainer && button) {
    logContainer.scrollTop = button.offsetTop - logContainer.offsetTop; 
}

现寻求能实现预期滚动行为的解决方案。

内容的提问来源于stack exchange，提问作者stax