具有弹性框div的Aurelia UI虚拟化（五列）

Question

我有一个Aurelia应用程序，我想在仪表板应用程序的一个部分中进行无限滚动。所以，我的滚动区域只在屏幕的一部分上。我有滚动但滚动是每三或四行生涩，我试图弄清楚如何调整ui虚拟化插件或我使用它没有生涩的滚动。

我试过让容器越来越大。我还没试过把它变成一张桌子。我使用flex-box来表示无限滚动中的项目，我有五个项目，而不是像演示应用程序一样，在列中，在可重复的div中，如下所示：

            <div class="" style="overflow: scroll;
                                 height: 1000px">
                <div class=" " virtual-repeat.for="row of rows" 
                                             style="display: -webkit-flex;
                                                    display: flex;
                                                    -webkit-flex-direction: row;
                                                    flex-direction: row;
                                                    height:300px;">
                    <div class="card" style="height:300px;">
                        <img src.bind="row.item1.image" ref="image" />
                        <div class="card-section">
                            <h3>First column</h3>
                        </div>
                    </div>
                    <div class="card" style="height:300px;">
                        <img src.bind="row.item2.image" ref="image" />
                        <div class="card-section">
                            <h3>second column</h3>
                        </div>
                    </div>
                    <div class="card" style="height:300px;">
                        <img src.bind="row.item3.image" ref="image" />
                        <div class="card-section">
                           <h3>third column</h3>
                        </div>
                    </div>
                    <div class="card" style="height:300px;">
                        <img src.bind="row.item4.image" ref="image" />
                        <div class="card-section">
                            <p>4th column</p>
                        </div>
                    </div>
                    <div class="card" style="height:300px;">
                        <img src.bind="row.item5.image" ref="image" />
                        <div class="card-section">
                            <p>5th column</p>
                        </div>
                    </div>
                </div>
            </div>