Unable to display all items of Polymer iron-list - polymer

Question

I'm trying out Polymer for the first time.
I have the following css on the index file:
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
height: 100vh;
background-color: #eeeeee;
}
You can see that the height is explicitly sized.
Then, there's the CSS of the page I'm having issues with iron-list:
:host {
padding: 10px;
display: flex;
flex-direction: column;
height: 100vh;
#apply(--paper-font-common-base);
}
iron-list {
flex: 1 1 auto;
--iron-list-items-container: {
max-width: 800px;
margin: auto;
margin-top: 5px;
margin-bottom: 60px;
border-bottom: 1px solid #ddd;
};
}
You can also see that I'm trying to use flexbox for the height of the iron-list.
I have a simple iron-ajax to populate the list. Theres 81 records on the JSON file.
<iron-ajax id="getVehiclesAjax"
url="../data/vehicles.json"
handle-as="json"
auto
on-response="handleVehiclesResponse"
on-error="handleVehiclesError"></iron-ajax>
The list is also pretty simple:
<iron-list id="list" scroll-target="document" items="[[vehicles]]" as="item" selection-enabled>
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
<div class="pad">
<div class="primary-text">[[item.modelo]]</div>
<div class="shortText">[[item.placa]]</div>
<div class="longText">[[item.chassi]]</div>
</div>
</div>
</div>
</template>
</iron-list>
Expected outcome
The iron-list should render all items, after all, the size is explicitly sized on the parent component, and the scrolltarget on the list is defined to the document. Also, the list has the flexbox setting on the css.
https://elements.polymer-project.org/elements/iron-list
Actual outcome
When I load the page, only 27 records are rendered, although the list height is sized accordingly with the rest of the elements that are not appearing.
I tried to add a button and call this: this.$.list.fire('iron-resize');
But it didn't worked. Resizing the window manually also doesn't do anything.
The only thing that worked, was removing this attribute from the iron-list:
scroll-target="document"
But if I remove it, there's a scrollbar showing for the iron-list, and a scrollbar for the document...
How can I solve this? I want only one scrollbar (document) and the items to be always rendered...

Answer 1

I managed to fix it. Digging up the code, I've found this property:
has-scrolling-region
... on the app-header-layout that was encapsulating all iron-pages. I removed it and now everything works as expected, the rendering of items as I scroll, and only one scrollbar (on the owner document).