When I observe the scroll height in my project in two different ways, two different numbers come up.

I'm currently working on a project, and i am trying to apply a background to a menu element when it is opened. Because the element can be dynamic in size, i am trying to grab the elements scroll height and trying to apply it to the background's height.

The issue is that the scroll height comes up short. When inspecting the element itself with a console log and checking its properties, the scroll height is for example 450. When I dump out the scroll height by itself, it changes to 270.

Showing the JavaScript Results of the first console log Results of the second console log

First Screenshot ("Showing the JavaScript")

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

Second Screenshot ("Results of the first 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: CSS"Properties(0)
tabIndex: -1

Third Screenshot ("Result of the second console log")

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