ngInfiniteScroll handler not firing with specific CSS & div structure

Question

I've purchased an Angular template to build a web app and I'm struggling to get the scroll event handler to fire using ngInfiniteScroll v1.2.0 (NOTE: the handler does fire once if I set infinte-scoll-immediate-check to true) . I've reproduced the issue by building the same div structure and CSS that came with the template using jsFiddle:

jsFiddle link

This is the structure that I have to work within because of the template:

<div ng-app='myApp' ng-controller='DemoController'>
<div class="app-content">
    <div class="box">
        <div class="box-row">
            <div class="box-cell">
                <div class="box-inner padding">
                    <div infinite-scroll=" loadMore() " infinite-scroll-distance="2 ">
                        <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And this is the CSS that is being used by each of the divs:

.padding {
    padding: 32px 32px;
}
.box .box-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.box .box-row .box-cell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.box .box-row {
    display: table-row;
    height: 100%;
}
.box {
    display: table;
    width: 100%;
    height: 100%;
    border-spacing: 0;
    table-layout: fixed;
}
.app-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
}

If I comment out the five surrounding divs, everything works fine. I'm not a CSS guy so this "table structure" that is being used is causing me some problems. Any help would be appreciated!