如何在我调整圆圈大小的同时将圆圈保持在其父母的边界内？

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

const parent = document.querySelector('.parent');
const circle = document.querySelector('.circle');

function adjustCircleSize() {
  const parentWidth = parent.offsetWidth;
  const parentHeight = parent.offsetHeight;
  const circleSize = Math.min(parentWidth, parentHeight) * 0.5;

  circle.style.width = circleSize + 'px';
  circle.style.height = circleSize + 'px';
}

window.addEventListener('resize', adjustCircleSize);
adjustCircleSize();