CSS - Почему некоторые элементы не отображаются в окне предварительного просмотра?

Question

Я создаю веб-программу для розничной вывески, используя Vue.js. Как только пользователь делает знаки, они должны быть распечатаны. Если для печати в очереди более 10 знаков, старые знаки не отображаются в окне предварительного просмотра.

Я подтвердил, что приложение работает, как ожидалось, до тех пор, пока не появится более 10 признаков. Я попытался удалить знаки, чтобы на странице было только 10, но поскольку страница не корректирует позиционирование знака, она ничего не делает.

Vue.js:

<div id="print-queue" v-title="title">
    <modal></modal>
    <confirm-dialog></confirm-dialog>
    <div class="queue-left">
        <div v-for="(sign, i) in signsLeft" :key="i">
            <sign
            :manufacturer="sign.manufacturer"
            :model="sign.model"
            :carrier="sign.carrier"
            :capacity="sign.capacity"
            :price=Number(sign.price)
            :comment="sign.comments"
            :sku="sign.sku"
            removable
            ></sign>
        </div>
    </div>
    <div class="queue-right">
        <div v-for="(sign, i) in signsRight" :key="i">
            <sign
                    :manufacturer="sign.manufacturer"
                    :model="sign.model"
                    :carrier="sign.carrier"
                    :capacity="sign.capacity"
                    :price=Number(sign.price)
                    :comment="sign.comments"
                    :sku="sign.sku"
                    removable
            ></sign>
        </div>
    </div>
</div>

Вот переменные, которые он использует. Довольно простой.

    data() {
        return {
            title: 'Print Queue', // Sets the text that appears in the tab
            signsLeft: [],
            signsRight: []
        }
    },

CSS:

.queue-left {
    display: table;
    float: left;
}

.queue-right {
    display: table;
    position: relative;
    right: 2px;
}

@media print {

    /* This correctly spaces the signs so that they align with the perforations on the paper */
    #print-queue {
        padding-top: 0.81em;
        padding-left: 2.3em;
    }

    .sign-preview *{
        visibility: visible!important;
        -webkit-print-color-adjust: exact;
        page-break-inside: avoid;
    }

    .container {
        padding: 32px;
        width: 100%;
    }

    .sign-delete {
        display: none;
    }

    tr:not(#comment-cell):hover {
        background-color: #fff;
    }

    ::webkit-scrollbar-thumb {
        background-color: #fff!important;
    }
}

Ожидается: пользователь должен иметь возможность печатать любое количество знаков. Знаки, превышающие 10, должны появиться на другой странице.

Факт: если имеется более 10 знаков, любые новые знаки выталкиваются с первой страницы и не отображаются в предварительном просмотре.