长段落打印时Page-break不生效，出现大量空白问题求助

问题根源在于flex布局会干扰CSS分页属性的正常触发，Flexbox的布局逻辑与传统块级布局不同，page-break-inside等分页规则对flex容器的支持有限。针对你的场景，可尝试以下方案：

方案一：移除flex布局（优先推荐，若不需要flex特性） #

将容器的display: flex改为块级布局，直接让分页规则生效：

.div {
  display: block;
  page-break-inside: auto;
}

方案二：保留flex布局的调整方案 #

如果必须使用flex布局，可通过以下修改让分页生效：

1. 给flex容器添加换行属性，允许内容拆分：

.div {
  display: flex;
  flex-wrap: wrap; /* 允许容器内元素换行，为分页创造条件 */
  page-break-inside: auto;
}

2. 针对内层的textarea做调整，确保文本可换行并支持分页：

.div textarea {
  width: 100%; /* 让文本框占满容器宽度 */
  white-space: pre-wrap; /* 让长文本自动换行，避免超出容器 */
  page-break-inside: auto; /* 明确允许textarea内分页 */
}

额外排查点 #

• 检查所有父级容器是否设置了overflow: hidden或固定高度（如height: 100%），这类属性会限制内容高度，阻止自动分页，需改为min-height或移除固定高度。
• 确保没有父元素设置page-break-inside: avoid，该属性会强制阻止元素内部分页。

内容的提问来源于stack exchange，提问作者Tồ Mạnh