Change in "clientwidth" with every browser reload

Question

I was working on this carousel and I ran into a problem where clientWidth is different in console.log(element) and console.log(element.clientWidth) and I want to know why this is happening. When I first save the file both values are the same but as soon as I reload they show different values.

I tried to reproduce the same thing with only text but it doesn't seem to happen with text.

Here is the code if you want to reproduce the problem.

const box = document.querySelector(".box")
console.dir(box)
console.log(box.clientWidth)

.box {
  display: flex;
  width: 100%;
  align-items: start;
}
    
.fs {
  flex-shrink: 0;   
}

<div class="box">
  <img class="fs" src="https://images-cdn.ubuy.co.in/63ef0a397f1d781bea0a2464-star-wars-rogue-one-movie-poster.jpg">
  <img class="fs" src="https://hippy.in/wp-content/uploads/2014/06/lagaan-bollywood-movie-poster.jpg">
  <img class="fs" src="https://moomar.co.uk/wp-content/uploads/2019/06/Back-To-The-Future.jpeg">
</div>

You can check this out in codePen.

Answer 1

document.getElementById("id").style.width= "100%";

https://www.w3schools.com/js/js_htmldom_css.asp and take the help

JS + CSS one load which loading the javascript