Разбить страницу, когда количество элементов неизвестно

Question

У меня есть страница, полная различных виджетов, графиков, таблиц и т. Д. c, которые динамически добавляются на страницу. Однако иногда графы пересекаются (см. Изображение)

Я добавил break-after:page для класса графика, но таким образом он добавляет разрывную страницу после каждого графика, и я хотел бы Разрыв страницы только тогда, когда графики не помещаются. Это возможно? Я добавил образец html код ниже

@media print {
    .graph {
        break-after:page
    }
  }

<div>
    <div class="dynamic-container">
        <h4 #headline>
            <span {{title}}></span>&nbsp;
        </h4>
    </div>
    </div>
    <!-- Graph widget ------------------------------------------------------------------------- -->
    <div *ngIf="widgetType == 1">
        <div [class.flex-container-horizontal]=".howLegend">
            <app-graph #graph class="graph"></app-graph>
            <app-legend>
            </app-legend>
        </div>
        <div style="display: grid;">
            <app-grid >
            </app-grid>
        </div>
    </div>