如何让div标签中的所有元素在更改大小(放大/缩小)时负责

<div style="display: flex;">
  <div style="flex: 1;">元素1</div>
  <div style="flex: 1;">元素2</div>
  <div style="flex: 1;">元素3</div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

<div style="width: 300px;">
  <div style="width: 33.33%;">元素1</div>
  <div style="width: 33.33%;">元素2</div>
  <div style="width: 33.33%;">元素3</div>
</div>

<div id="myDiv" style="width: 300px;">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

<script>
  const myDiv = document.getElementById('myDiv');
  const childElements = myDiv.children;

  function resizeElements() {
    const divWidth = myDiv.offsetWidth;
    const numElements = childElements.length;
    const elementWidth = divWidth / numElements;

    for (let i = 0; i < numElements; i++) {
      childElements[i].style.width = elementWidth + 'px';
    }
  }

  window.addEventListener('resize', resizeElements);
  resizeElements(); // 初始化时调用一次
</script>