如何使所有div框的高度相同

<div class="container">
  <div class="box">内容1</div>
  <div class="box">内容2</div>
  <div class="box">内容3</div>
</div>

.container {
  display: flex;
}

.box {
  flex-grow: 1;
}

<div class="container">
  <div class="box">内容1</div>
  <div class="box">内容2</div>
  <div class="box">内容3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
}

.box {
  background-color: lightgray;
}

<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>

<script>
  window.onload = function() {
    var boxes = document.getElementsByClassName('box');
    var maxHeight = 0;
    
    for (var i = 0; i < boxes.length; i++) {
      maxHeight = Math.max(maxHeight, boxes[i].offsetHeight);
    }
    
    for (var i = 0; i < boxes.length; i++) {
      boxes[i].style.height = maxHeight + 'px';
    }
  };
</script>