使用jQuery拖拽DIV后，DIV无法随新增内容自动扩展的问题

问题原因 #

你使用的jQuery UI 1.11.4版本中，draggable组件在拖拽操作后会给目标元素（#my-DIV）添加position: relative样式，且该版本存在一个行为：拖拽完成后会隐式固定容器的高度，导致后续新增内容时容器无法自动扩展高度。

解决方法 #

在每次新增内容后，强制将容器的高度重置为auto，让其自适应内部内容：

修改你的submit函数如下：

function submit() {
  let text = `Testing<br>
      Testing<br>
      Testing`;

  let newDIV = document.createElement('div');
  newDIV.innerHTML = text;
  const container = document.getElementById('my-DIV');
  container.appendChild(newDIV);
  // 重置高度为auto，强制容器自适应内容
  container.style.height = 'auto';
}

额外优化 #

你的CSS代码中存在重复的display属性声明（display: flex和display: block），浏览器会优先解析最后一个声明，建议删除冗余的display: flex，避免样式冲突：

.div {
  background-color: black;
  border-color: white;
  border-style: solid;
  padding: 3px;
  max-width: 500px;
  display: block; /* 保留这一行即可 */
}

内容的提问来源于stack exchange，提问作者William Tomko