获取元素scrollHeight时数值不一致的问题求助

大家好，我最近在项目里遇到一个奇怪的问题，想请教下各位开发者朋友。

我正在做一个给打开状态的菜单元素添加背景的功能，因为菜单元素的高度是动态变化的，所以打算通过获取它的scrollHeight来同步设置背景的高度。但试了之后发现，两种获取方式得到的scrollHeight数值居然不一样，直接打印出来的数值比在控制台查看元素属性里的数值小了很多。

具体情况是这样的，我写了两行日志代码：

console.log(subnav)
console.log("Scrollheight is: " + subnav.scrollHeight)

第一行打印整个元素后，在控制台展开查看它的属性，scrollHeight显示的是450；但第二行直接打印subnav.scrollHeight，得到的结果却是270。

下面是对应的控制台输出内容：

第一个console.log的元素属性片段：

parentElement: <li class
parentNode: <li class="e
part DOMTokenList []
popover: null
prefix: null
previousElementSibling:
previousSibling: #text "
role: null
scrollHeight: 450
scrollLeft: 0
scrollLeftMax: 0
scrollTop: 0
scrollTopMax: 0
scrollWidth: 268
shadowRoot: null
slot: ""
spellcheck: false
style: CSSProperties(0)
tabIndex: -1

第二个console.log的输出：

[vite] connecting...
[vite] connected.
<div class="header__subnav-container...inter-events-none w-max">
Scrollheight is: 270

有没有朋友遇到过类似的问题？这到底是哪里出问题了呀？

备注：内容来源于stack exchange，提问作者PS1 Mr Bean