The problem is that position of your div are related to left side and this is why it looks like you increase only the right side; try to add positioning with transform by center or make it by flex(align-items + justify-content)

.box {
  width: 300px;
  height: 200px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: black;
}

What about CSS scale?

That will keep the actual position of the element and expand it in all directions, unless you specify a transform-origin value.

Edited with an ever growing effect...

let myDiv = document.querySelector(".box");
let orgiSize = myDiv.getBoundingClientRect().width;
let increments = 0;

function increaseDiv() {
  increments += 50; // That is 25px on both sides...

  // Make the math here
  var percentage = Math.floor((orgiSize + increments) / orgiSize * 100) / 100

  console.log(percentage);
  myDiv.style.transform = `scale(${percentage})`; // That is a percentage value
}

.box {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 100px;
  background: black;
}


/* for the demo */

button {
  position: absolute;
  z-index: 9999;
}

<div class="box"></div>
<button onclick="increaseDiv()">Click</button>

If I am understanding you correctly, I think if you changed

var currWidth = myDiv.clientWidth;
myDiv.style.width = currWidth + 100 + "px";

to

var currWidth = myDiv.getBoundingClientRect().width;
myDiv.style.width = currWidth + 50 + "px";

and also added

var currHeight = myDiv.getBoundingClientRect().height;
myDiv.style.height = currHeight + 50 + "px";

I also noticed that your div is using absolute positioning, so you may also need to offset the left and top according to the size change. If you are getting an issue with the actual position when the size changes let me know.