如何将容器div的高度固定为最大的内部div？

Question

我的网站上有一个选项卡布局，用户可以单击4个选项卡之一，更改下面显示的内容。选择具有不同的高度。无论所选标签内容的高度如何，我都希望该div的高度保持不变。

我目前已将max-height和min-height设置为最大子元素的近似高度，但这似乎很糟糕，因为用户可以调整页面大小以使文本拉伸

function changeTab() {
  var div1 = document.getElementById("1");
  var div2 = document.getElementById("2");

  if (div1.style.display == "none") {
    div1.style.display = "";
    div2.style.display = "none";
  } else {
    div2.style.display = "";
    div1.style.display = "none"
  }
}

<button id="change-div" onclick="changeTab()"> change div </button>
<br>
<div id="tab-content-wrapper">
  <div id="1" class="tab-content">blah <br> blah <br> blah <br> </div>
  <div id="2" class="tab-content" style="display:none">other stuff. </div>
</div>