PDF打印时双列块（Flex/Grid）分页溢出异常问题咨询

问题描述 #

使用Flex/Grid等双列块布局进行PDF渲染打印时，会出现异常分页：当任意一列内容无法容纳在当前页面时，第二列会被整体推至下一页，而非仅将该列中放不下的内容移至下一页，另一列保持正常排版。

实际效果 #

复现代码 #

JSX部分 #

<div className={clsx(styles.techTablesWrapper)}>
    <div className={styles.left}>
        {[1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
            26, 27, 28, 29,
        ].map((el) => {
            return <div>Some text left Some text left Some text left33</div>
        })}
    </div>
    <div className={styles.right}>
        {[1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
            26, 27, 28, 29,
        ].map((el) => {
            return <div>Some text left Some text left Some text left33</div>
        })}
    </div>
</div>

CSS部分 #

.techTablesWrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    .left {
        border: 1px solid red;
        grid-column: 1 / 2;
        grid-row-start: 1;
        height: 100%;
    }

    .right {
        border: 1px solid green;
        grid-column: 2 / 2;
        grid-row-start: 1;
        height: 100%;
    }
}

预期效果 #

实现两列各自正常流式排版，仅占用分配给它们的空间。

解决方案 #

Grid/Flex布局在PDF打印时会被浏览器视为整体块，无法自动拆分分页，可通过以下方案解决：

方案1：改用CSS多列布局（Columns） #

多列布局专为流式文本分栏设计，天然支持分页时的列拆分，适合纯文本类双列内容：

.techTablesWrapper {
    columns: 2;
    column-gap: 20px;
}

.left, .right {
    break-inside: avoid;
    border: 1px solid red;
    margin-bottom: 10px;
}

.right {
    border-color: green;
}

注意：该方案会自动按顺序填充两列，不适合需要左右列内容完全独立的场景。

方案2：调整Grid布局的打印属性 #

移除固定高度并添加分页相关属性，强制允许容器内元素拆分：

.techTablesWrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    page-break-inside: auto;
}

.left, .right {
    page-break-inside: avoid;
    height: auto; /* 移除100%高度限制 */
}

核心是去掉height:100%，避免浏览器将列视为不可拆分的固定块。

方案3：使用表格布局（Table） #

表格布局在PDF打印中的分页兼容性较好，适合左右列内容独立的场景：

.techTablesWrapper {
    display: table;
    width: 100%;
}

.left, .right {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

.left {
    border: 1px solid red;
}

.right {
    border: 1px solid green;
}

表格单元格会自适应内容高度，分页时保留列结构，不会整体跳转。

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