CSS break-inside: avoid not working in Safari & Firefox browsers for printing; some content & tables are broken between pages. Any alternatives?

Question

I am encountering an issue with the CSS property.

break-inside: avoid; 

not functioning as expected in Safari and Firefox browsers specifically, during the printing process.

Despite applying this property to prevent content and tables from breaking into two pages, the desired layout is not being maintained in the print preview. I am seeking assistance to identify alternative solutions or workarounds that effectively address this problem across different browsers.

I tried "react-to-print": "^2.14.13" library to create multipage PDF document from react JS. In some cases, some contents are being split across pages. (Safari, Firefox browsers) Used code for the process is,

@media print {
 .avoid-breakInside {
    break-inside: avoid !important;    
  }
}

@page {
  size: auto;
  margin: 9mm;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

This solution is mostly accurate, as I've noticed improvements in browsers, Chrome, Edge, Opera etc. However, I'm still encountering issues in specific browsers like Safari and Firefox. If there are any suggestions or solutions to resolve this issue, I would greatly appreciate.

References: This reference URL indicates that Safari browser supports the page-break-inside property. follow reference for css property page-break-inside

I tried other solution mentioned other places.

• make sure no property display: flex, set all to block , inline-block

• Tried

    display: inline-block;
    vertical-align: top;
    width: 100%;
  

  Instead,

      page-break-inside: avoid !important;    
  

• Tried

      break-inside: avoid !important;
  

• Tried

      break-inside: avoid !important;    
      display: block;
  

  not worked any solutions.