如何在同一行中为不同的div赋予不同的高度

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

<style>
.container {
  display: flex;
}

.div1 {
  flex: 1;
  background-color: red;
}

.div2 {
  flex: 2;
  background-color: green;
}

.div3 {
  flex: 3;
  background-color: blue;
}
</style>

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

<style>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 3fr;
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: green;
}

.div3 {
  background-color: blue;
}
</style>

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

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

var div1Height = /* 根据具体内容或其他条件计算高度 */;
var div2Height = /* 根据具体内容或其他条件计算高度 */;
var div3Height = /* 根据具体内容或其他条件计算高度 */;

div1.style.height = div1Height + 'px';
div2.style.height = div2Height + 'px';
div3.style.height = div3Height + 'px';
</script>