如何使用jQuery在父div中单击时将子div的大小调整为单击点或区域？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="parentDiv">
  <div id="childDiv"></div>
</div>

$(document).ready(function() {
  $('#parentDiv').click(function(event) {
    // 在这里编写子div大小调整的逻辑
  });
});

$(document).ready(function() {
  $('#parentDiv').click(function(event) {
    var parentOffset = $(this).offset();
    var clickX = event.pageX - parentOffset.left;
    var clickY = event.pageY - parentOffset.top;
    
    $('#childDiv').css({
      width: clickX,
      height: clickY
    });
  });
});