Flex布局中能否让单个Div元素跨列分段排布？

非JavaScript方案：用CSS多列布局（优先推荐） #

flex的column wrap是把整个元素当成一个独立块来换行的，所以没法让单个元素跨列拆分。换成CSS多列布局就能解决这个问题，它会自动把内容拆到下一列：

代码示例 #

把容器的flex布局替换为多列布局即可：

.container {
  columns: 2; /* 设置为2列 */
  height: 1080px; /* 保留原固定高度 */
  column-fill: auto; /* 优先填满第一列，再向第二列填充内容 */
}

如果需要避免某些子元素（比如.background-acolyte）被拆分到两列，给该元素添加以下样式：

.background-acolyte {
  break-inside: avoid; /* 禁止此元素被拆分 */
}

设置完成后，.alchemist元素会从.background-acolyte下方开始排布，当第一列剩余空间不足时，剩余内容会自动延续到第二列顶部，完全符合你的预期。

JavaScript方案（仅当必须保留flex布局时使用） #

如果一定要用flex布局，只能通过JS计算高度，手动拆分.alchemist的内容：

1. 计算容器总高度与.background-acolyte高度的差值，得到第一列剩余可用高度
2. 克隆.alchemist元素，将原元素高度限制为剩余高度（隐藏溢出部分），克隆元素显示剩余内容并放入第二列

简化代码示例 #

const container = document.querySelector('.container');
const acolyte = document.querySelector('.background-acolyte');
const alchemist = document.querySelector('.alchemist');

const containerHeight = container.offsetHeight;
const acolyteHeight = acolyte.offsetHeight;
const remainingHeight = containerHeight - acolyteHeight;

// 克隆alchemist元素
const alchemistClone = alchemist.cloneNode(true);
container.appendChild(alchemistClone);

// 原元素仅显示第一列能容纳的部分
alchemist.style.height = `${remainingHeight}px`;
alchemist.style.overflow = 'hidden';

// 克隆元素显示剩余内容
alchemistClone.style.marginTop = `-${remainingHeight}px`;
alchemistClone.style.clipPath = `inset(${remainingHeight}px 0 0 0)`;

注意：这种方案需要处理内容动态变化的情况，维护成本较高，优先推荐使用多列布局方案。

内容的提问来源于stack exchange，提问作者Nathan Headley