How to get page breaks to show after divs in print window?

Question

I'm currently putting data inside custom components with borders and such using ExtJs 4. I want there to be four components on a page, with a page break after. Right now I am using this css:

@media print {
    .app .pb {
        page-break-after: always;
        clear: both;
    }
}

I have some javascript that, after every 4 cards, adds a div with the class pb:

if (index % 4 === 3) {
    this.down('#cards').add({
        xtype: 'component',
        html: '<div class="pb"></div>'
    });
}

I know the css line clear:both; is working, but the page-break-after: always; seems to never be working. I've looked at these questions:

1. Google Chrome printing page breaks
2. Css Printing: Avoiding cut in half divs between pages

But so far the solutions have not worked for me. I think it may because Extjs has a nested system of divs for each component? Here is a screenshot of the div structure:

As you can see, the divs with class pb are in the correct locations - after every 3 cards. So why do the page breaks not work?

Here is a pic of the components being cut off in the print page:

Any help would be greatly appreciated!

Edit: Here is some relevant javascript and css that should help:

At the beginning of my js file:

this.add({
    xtype: 'container',
    itemId: 'cards'
});

Adding each record to the card container: [the card xtype is just template html for each record]

Ext.Array.each(records, function(record, index) {
    this.down('#cards').add({
        xtype: 'card',
        data: record.data
    });

    if (index%4 === 3) {
        this.down('#cards').add({
            xtype: 'component',
            html: '<div class="pb"></div>'
        });
    }
}, this);

Css for each record:

.app .record {
    background-color: #fff;
    border: 2px solid #000;
    float: left;
    height: 3.2in;
    margin: 0.1in 0.1in 0.1in 0.1in;
    position: relative;
    overflow: hidden;
    width: 4.3in;
}

Note: This code works in Firefox, but not in Chrome.

Answer 1

The key to getting the page breaks to work with Ext 4 and our structure was to add a css property to the page when printing:

.print-page .app {
    overflow: hidden !important;
}

We think this is necessary due to the structure of divs that Ext creates automatically.