Bootstrap flex не показывает все svg при печати

Question

У меня есть html код с angular динамически отображаемым SVG

<div class="container">
    <div class="hdn">
        <h2>Barcode Generator</h2>
        <button (click)="createBarcode()">Load Barcode</button>
        <!-- <button (click)="onPrint()">Print</button> -->
    </div>
    <div id="toPrint" class="d-flex align-content-start flex-wrap">
        <div class="p-4 text-center" *ngFor="let t of Data">
            <svg [attr.id]="'b-'+t.barcode"></svg><br>
            <span>{{t.name}}</span>
        </div>
    </div>
</div>

, что даст мне этот вывод в браузере.

моя проблема это: когда я печатаю предварительный просмотр этого в браузере, он дает мне только 10 напечатанных штрих-кодов, но у меня 78 визуализированных штрих-кодов

и пробная шкала меньшего размера

где может быть проблема с моими кодами

у меня есть этот код в стиле. css для печати

@media print {
body * {
  visibility:hidden;
}
#toPrint * {
  visibility:visible;
}
#toPrint {
  position:absolute;
  left:0;
  top:0;
}

}

спасибо так много заранее :) 1033 *