如何用CSS将垂直溢出内容转移至相邻列？

这种需求完全可行，主要有两种实现思路：

一、纯CSS方案（推荐，无需JS） #

如果不需要严格保留两个独立<div>的结构，使用CSS多列布局可以自动实现内容溢出后流向第二列。只需给内容容器设置固定高度和分列属性即可：

<div class="column-container">
  这里是会溢出的内容，当容器高度不够时，超出部分会自动流到第二列展示。
</div>

.column-container {
  height: 200px; /* 设置触发溢出的固定高度 */
  columns: 2; /* 指定分为2列 */
  column-gap: 20px; /* 可选：设置列之间的间距 */
}

二、JavaScript方案（适配独立双div结构） #

如果必须保留你给出的.col-1和.col-2两个独立容器，可以通过JS计算内容高度，将溢出部分转移到第二列：

HTML结构 #

<div class="col-1" style="height: 200px; overflow: hidden; border: 1px solid #ccc;">
  这里是可能溢出的内容，当高度超过容器限制时，超出部分会被移到右侧的列中。
</div>
<div class="col-2" style="border: 1px solid #ccc;"></div>

JavaScript代码 #

const col1 = document.querySelector('.col-1');
const col2 = document.querySelector('.col-2');

// 克隆第一列内容，用于计算完整内容的高度（不影响页面显示）
const contentClone = col1.cloneNode(true);
contentClone.style.cssText = 'position: absolute; visibility: hidden; height: auto;';
document.body.appendChild(contentClone);

const fullContentHeight = contentClone.offsetHeight;
const col1Height = col1.offsetHeight;

// 当内容高度超过容器高度时，开始转移溢出部分
if (fullContentHeight > col1Height) {
  // 逐步移除第一列的最后一个元素，直到第一列高度符合要求
  while (col1.offsetHeight > col1Height) {
    const lastElement = col1.lastChild;
    if (lastElement) {
      col2.insertBefore(lastElement, col2.firstChild);
    }
  }
}

// 移除克隆的内容
document.body.removeChild(contentClone);

注意：这个方案基于逐元素转移，适合内容由块状元素组成的场景；如果是纯文本内容，需要额外处理字符级别的分割逻辑。

内容的提问来源于stack exchange，提问作者francis astin