flex子项需显式设为块级盒并加break-inside: avoid才生效，否则浏览器忽略；打印时应降级为block布局并清除浮动、绝对定位等破坏分页上下文的样式。
Flex子项不是块级盒，break-inside加在容器上完全无效
浏览器打印分页机制只检查块级格式化上下文（BFC）是否允许断开，而 display: flex 容器的子元素默认是 flex-item，既不是块级盒，也不参与分页锚点计算。你写 .card-list { break-inside: avoid; }，Chrome 80+、Firefox 90+ 会直接忽略——它根本不会把该声明纳入分页逻辑。
必须给每个子元素显式设为块级并加 break-inside: avoid
真正起作用的是卡片、报表行这类子元素本身，但前提是它们被识别为独立块级盒：
-
.card { display: block; break-inside: avoid; }—— 必须显式声明display: block或inline-block - 如果
.card内有<p></p>、<ul></ul>等嵌套内容，它们也得各自加break-inside: avoid，否则断点会退到段落中间 - 别用已弃用的
page-break-inside: avoid，现代浏览器在 Flex 上不保证兼容
这些样式会让 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：它会在页尾放大物理间距，导致下一个子项被挤到下一页；建议在 print 中设gap: 0，改用margin-bottom控制间距 - 所有装饰性伪元素（如
::before分隔线）、占位<div>，统一用 <code>display: none移除，而非visibility: hidden最易被忽略的是：即使你按规范写了break-inside: avoid，只要子项里混用了float或position: absolute，它就一定不生效——浮动脱离文档流，绝对定位脱离布局上下文，分页锚点无处可锚。
