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

如果调整后的div内容高于调整后的div高度，则在使用JavaScript调整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>

#包装纸{
边框：1px纯黑；
宽度：1000px；
}
div:not（#包装器）{
边框：1px纯红；
显示：内联块；
宽度：49%；
}
#内容2{
垂直对齐：顶部；
单词包装：打断单词；
}
单击我


内容1内容1内容1内容1内容1内容1
内容1内容1内容1内容1内容1内容1
内容2
$（函数（）{
var height=getHeight（“#content1”）；
设置高度（“内容2”，高度，“px”）；
});
函数fillContent2（）{
$（“#content2”）.html(
“content2content2content2content2content2
”+
“content2content2content2content2content2
”+
“content2content2content2content2content2”
);
}//函数fillContent2（）的结尾
函数getHeight（名称）{
变量高度=$（名称）.height（）；
返回高度；
}//函数getWidth（name）的结尾
函数setHeight（名称、高度、类型）{
$（名称）.css（“高度”，高度+类型）；
}//函数结尾setHeight（名称、高度、类型）

是否溢出：隐藏；或溢出：自动；选择？关于problem div.@hastingzusammenstellen否，我想要默认结果；或溢出：自动；选择？关于问题div.@hastingzusammenstellen否，我想要默认结果。