html – don’t minimize my ngFor generated div after I ship it to print. (break-inside didnt work)

What I need to obtain is that my DIV factor will not be minimize off by the Print possibility. I’ve used the code BREAK-INSIDE: AVOID code and it does not work, in the long run my DIV finally 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.outcomes">
              <div class="d-flex align-items-center flex-column"
                type="width: 4.5cm; top: 8cm; max-width: 4.5cm; border: 1px dashed #000000; padding: .25cm;">
                <h6 class="mb-0" type="font-size: 10px;">Identify:</h6>
                <h6 class="mb-30">{{ QRID.proyecto }}</h6>
                <img [src]="QRID.foto" type="top: 3.5cm; width: 3.5cm; margin-bottom: 7px;">
                <ngx-qrcode-styling [config]="config" [type]="'canvas'" [shape]="'sq.'" [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 category="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: keep away from !essential;
    page-break-inside: keep away from !essential;
    -webkit-break-inside: keep away from !essential;
  }
}