如何在调整大小时将箭头的位置固定在框中？

<div id="container">
  <div id="arrow"></div>
  <div id="box"></div>
</div>

#container {
  position: relative;
  width: 300px;
  height: 200px;
}

#arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: red;
}

#box {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

window.addEventListener('resize', function() {
  var container = document.getElementById('container');
  var arrow = document.getElementById('arrow');
  var box = document.getElementById('box');
  
  var containerWidth = container.offsetWidth;
  var containerHeight = container.offsetHeight;
  var arrowWidth = arrow.offsetWidth;
  var arrowHeight = arrow.offsetHeight;
  
  var arrowLeft = (containerWidth - arrowWidth) / 2;
  var arrowTop = (containerHeight - arrowHeight) / 2;
  
  arrow.style.left = arrowLeft + 'px';
  arrow.style.top = arrowTop + 'px';
});