Flex容器打印截断非浏览器bug，而是分页机制只识别块级盒（BFC）；需将子项设为display: block并单独加break-inside: avoid，且避免overflow: hidden、transform、absolute等破坏分页上下文的属性。
Flex容器在打印时被截断，不是浏览器bug，而是分页机制根本不“认识”Flex布局——它只对块级盒（BFC）做分页决策，而display: flex容器及其子项都不属于这个范畴。
Flex容器加break-inside: avoid完全无效
你写.card-list { display: flex; break-inside: avoid; }，Chrome、Firefox、Safari 都会忽略。原因很直接：分页引擎只检查块级元素是否允许断开，而Flex容器是格式化上下文边界，不是“可分页单元”。它的子项更是display: flex-item，既不继承break-inside，也不参与分页锚点计算。
真正起作用的必须是每个子元素自身
只有把卡片、报表行这类子项显式设为块级，并单独加break-inside: avoid，才可能阻止内部断开：
-
.card { display: block; break-inside: avoid; }—— 必须写，不能省 - 如果
.card里有break-inside: avoid，否则断点退到段落中间 - 别用
page-break-inside: avoid替代——现代浏览器在Flex上已弃用该语法，仅作兼容 fallback
这些样式会让break-inside彻底失效
就算你正确写了break-inside: avoid，只要子项存在以下任一情况，分页控制就形同虚设：
-
overflow: hidden、transform、position: absolute—— 三者任一都会切断分页上下文 -
height或max-height限制过死：内容动态超出单页（A4纵向约900px减边距）时，浏览器可能宁可留白也不切，但超限太多仍会被硬截 - 没包裹在
@media print中：部分浏览器只在print媒体中解析该属性，屏幕渲染阶段还可能因样式冲突导致布局异常
更稳妥的做法是在@media print中降级为block布局
Flex在打印中本质不可控。与其强行塞指令，不如主动接管：
-
@media print { .card-grid { display: block; } }—— 把弹性布局转为传统流式结构 - 子项改用
display: inline-block+vertical-align: top维持横向排列，比float更兼容PDF导出工具 - 禁用
gap：它会在页尾放大物理间距，导致下一个子项被挤到下一页；建议gap: 0，改用margin-bottom - 所有装饰性伪元素（如
::before分隔线）、占位，统一用display: none移除，而非visibility: hidden最易被忽略的是：即使你按规范写了
break-inside: avoid，只要子项里混用了float或position: absolute，它就一定不生效——浮动脱离文档流，绝对定位脱离布局上下文，分页锚点无处可锚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
