CSS-为什么某些元素没有出现在打印预览窗口中？

Question

我正在使用Vue.js构建基于Web的零售标牌程序。一旦用户做出标志，就需要将其打印出来。如果排队打印的标志超过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个以上的标志，所有新标志都会从首页上推出，并且不会出现在打印预览中。