如何使两个堆叠的div具有相同的高度

<div class="container">
  <div class="div1">Content 1</div>
  <div class="div2">Content 2</div>
</div>

<style>
.container {
  display: flex;
}

.div1, .div2 {
  flex: 1;
}
</style>

<div class="container">
  <div class="div1">Content 1</div>
  <div class="div2">Content 2</div>
</div>

<style>
.container {
  display: table;
}

.div1, .div2 {
  display: table-cell;
}
</style>

<div class="div1">Content 1</div>
<div class="div2">Content 2</div>

<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');

var maxHeight = Math.max(div1.offsetHeight, div2.offsetHeight);

div1.style.height = maxHeight + 'px';
div2.style.height = maxHeight + 'px';
</script>