最近有公司產品有客服反應，我們前端頁面在列印時，在跨頁時字會被截掉，在換頁的地方會被切成兩半。然後我在火狐上測試，會無法列印全部網頁範圍。這真是一個神奇的問題。
類似變成這樣：
一開始是找到這些：
就是在列印模式時，將 div 或者要列印的區域，將 page-break-inside 設定為 avoid：
@media print
{
div{
page-break-inside: avoid;
}
}
但我們實際測試後，在很長的頁面還是有一樣的問題。這下真的難倒我了，四處尋覓還是找不到合適的解決方案。
經過一天後，我主管回信客服已經上 hotfix 解決此問題，讓我十分好奇到底是怎麼解開的？
原來銳眼如他，發現在列印時，上下高度的間距竟然些微不同，經過一陣尋覓後，發現是外層 container 的 flex 屬性惹禍，於是就在列印模式中，將那些元素設定成 display: block 或是 display: inline-block，不再使用 flex 彈性調整。
接下來再使用適當的關鍵字果然就查到類似的問題了：