polymer iron-list only loading 20 items - ajax

Question

I have an a test array that I am retrieving from iron-ajax with around 1000 items. I set that return array to the people property of my custom polymer element. Iron-list is displaying the first 20 results, but when i scroll down the rest of the results are not being loaded.
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/iron-list/iron-list.html">
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<dom-module id="people-list">
<template>
<iron-list items="[[people]]" as="item" class="flex">
<template>
<div style="background-color:white; min-height:50px;">[[item.city]]</div>
</template>
</iron-list>
<iron-ajax
auto
id="ajaxPeopleList"
method="POST"
url="/people/list"
handle-as="json"
last-response="{{people}}">
</iron-ajax>
</template>
<script>
Polymer({
is: 'people-list',
properties: {
people: {
type: Array
}
}
});
</script>
</dom-module>
I think it may have to do with the height of the screen/iron-list element, but I am stuck and not sure how to proceed.
I can get it load all items if I set the height of the iron-list elements in pixels. But I just want it to fit on the screen. The docs make it look like you can use the iron-flex layout and use the class flex, which is what I tried to do in my sample code, but it has no effect.

Answer 1

This is because nothing is firing the iron-resize event to tell the iron-list to redraw the items. According to the docs:
Resizing
iron-list lays out the items when it recives a notification via the iron-resize event. This event is fired by any element that implements IronResizableBehavior.
By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.
document.querySelector('iron-list').fire('iron-resize');
I've added the following to your code (which is probably a bit of a hack) and got it working:
ready: function () {
document.addEventListener("scroll", function () {
// fire iron-resize event to trigger redraw of iron-list
document.querySelector('iron-list').fire('iron-resize');
});
}

Answer 2

Ben Thomas is right. You're getting the json elements but it's not displayed because the iron-list needs to be redrawn. Since i had the same problem, i went to google polymers website and found THIS code example.
In short for your example:
<script>
// Only execute after DOM and imports (in our case the json file) has been loaded
HTMLImports.whenReady(function() {
Polymer({
is: 'people-list',
properties: {
people: {
type: Array
}
},
attached: function() {
// Use the top-level document element as scrolltarget
this.$.list.scrollTarget = this.ownerDocument.documentElement;
}
});
});