如何让两个div取较大div的高度

<div class="container">
  <div class="box box1">Content 1</div>
  <div class="box box2">Content 2</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.box {
  width: 100%;
}

.box1 {
  background-color: lightblue;
}

.box2 {
  background-color: lightgreen;
}

<div class="box box1">Content 1</div>
<div class="box box2">Content 2</div>

.box {
  width: 100%;
}

.box1 {
  background-color: lightblue;
}

.box2 {
  background-color: lightgreen;
}

document.addEventListener("DOMContentLoaded", function() {
  var box1 = document.querySelector(".box1");
  var box2 = document.querySelector(".box2");

  var height1 = box1.offsetHeight;
  var height2 = box2.offsetHeight;

  if (height1 > height2) {
    box2.style.height = height1 + "px";
  } else {
    box1.style.height = height2 + "px";
  }
});