do not cut my ngFor generated div when I send it to print. (break-inside didnt work)

What I want to achieve is that my DIV element is not cut off by the Print option. I have used the code BREAK-INSIDE: AVOID code and it doesn't work, in the end my DIV ends up sliced in half.

HTML

<block-ui></block-ui>
<div class="content-wrapper container-xxl p-0">
  <div class="content-body">
    <div class="card">
      <div class="row">
        <div class="col-xl-9 col-md-8 col-12">
          <div class="row m-1">
            <div class="m-1 dont-break" *ngFor="let QRID of printData.results">
              <div class="d-flex align-items-center flex-column"
                style="width: 4.5cm; height: 8cm; max-width: 4.5cm; border: 1px dashed #000000; padding: .25cm;">
                <h6 class="mb-0" style="font-size: 10px;">Name:</h6>
                <h6 class="mb-30">{{ QRID.proyecto }}</h6>
                <img [src]="QRID.foto" style="height: 3.5cm; width: 3.5cm; margin-bottom: 7px;">
                <ngx-qrcode-styling [config]="config" [type]="'canvas'" [shape]="'square'" [width]="110" [height]="110"
                  [margin]="0" [data]="QRID.qr">
                </ngx-qrcode-styling>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-4 col-12 invoice-actions mt-md-0 mt-2">
          <div class="card">
            <div class="card-body">
              <a class="btn btn-outline-secondary btn-block mb-75" href="javascript:window.print();" rippleEffect>
                Print
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

@media print {
  div.dont-break {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-break-inside: avoid !important;
  }
}