动态修改绝对定位div高度：子元素溢出与拖拽功能保留问题

问题根源 #

原场景中新增子元素溢出父容器，核心原因是网格布局未在元素新增后重新计算位置，且父容器未设置合理的溢出处理规则。

具体解决步骤 #

1. 配置父容器CSS，处理溢出

给.grid容器添加以下样式，确保内容超出时自动适配：

.grid {
  position: relative;
  /* 纵向超出时显示滚动条，横向禁止溢出 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 确保容器至少占满可用空间，避免初始高度不足 */
  min-height: 100%;
}

• 若需要固定容器高度，可替换min-height为具体值（如height: 80vh），滚动逻辑依然生效。

2. 新增元素后触发网格重排

由于原示例使用拖拽网格库（如GridStack/Sortable），新增元素后必须手动调用库的布局更新方法，让系统重新计算所有元素的位置：

// 假设gridInstance是网格库的实例对象
function addNewGridItem() {
  // 创建并添加新元素到.grid容器
  const newItem = document.createElement('div');
  newItem.className = 'item h1 w1';
  newItem.innerHTML = `
    <div class="item-content">
      <div class="card">
        <div class="card-id"></div>
        <h1>new item</h1>
        <div class="card-remove"><i class="material-icons">&#xE5CD;</i></div>
      </div>
    </div>
  `;
  document.querySelector('.grid').appendChild(newItem);

  // 调用网格库的更新方法，确保新元素被正确布局
  gridInstance.makeWidget(newItem);
  gridInstance.layout();
}

• 若使用自定义拖拽逻辑，需在新增元素后遍历所有子元素，重新计算每个元素的坐标，确保不超出父容器边界。

3. 限制元素初始位置（可选）

创建新元素时，直接指定其初始位置为父容器内的可用区域，避免初始溢出：

// 示例：获取父容器可用宽度，计算新元素的初始X/Y坐标
const grid = document.querySelector('.grid');
const availableWidth = grid.clientWidth;
// 确保新元素的宽度不超过可用宽度
newItem.style.left = `${availableWidth - newItem.offsetWidth}px`;
newItem.style.top = `${grid.scrollHeight}px`;

内容的提问来源于stack exchange，提问作者Michael Horvilleur