在用于调整div内容之前，使用JavaScript调整div高度时内容会溢出

Question

如果调整的div内容高于调整后的div高度，则在使用JavaScript调整div高度之前，内容会溢出，之后用于调整div内容。当JavaScript不用于调整div高度时，不会发生这种情况。

基本上，2个div是并排的，较短的div调整到较高div的高度。然后，当单击按钮时，内容将填入原始较短的div中，但如果内容高于调整的div高度，则内容会溢出。我们如何解决这个问题？

<?php
  include("ajaxLink.php");
?>

<style>
#wrapper {
  border: 1px solid black;
  width: 1000px;
}
div:not(#wrapper) {
  border: 1px solid red;
  display: inline-block;
  width: 49%;
}
#content2 {
  vertical-align: top;
  word-wrap: break-word;
}
</style>

<button onclick = 'fillContent2()'> Click me </button><br><br>
<div id = 'wrapper'>
  <div id = 'content1'> 
    content1content1content1content1content1 
    content1content1content1content1content1 
  </div>
<div id = 'content2'>content2</div>
</div>

<script>

$(function(){

  var height = getHeight("#content1");
  setHeight("#content2", height, "px");

});

function fillContent2() {
  $("#content2").html(
    "content2content2content2content2content2<br>"+
    "content2content2content2content2content2<br>"+
    "content2content2content2content2content2"
  );
} //end of function fillContent2()

function getHeight(name) {
  var height = $(name).height();
  return height;
} //end of function getWidth(name)

function setHeight(name,height,type) {
  $(name).css("height", height + type);
} //end of function setHeight(name,height,type)

</script>