Polymer Core-List not showing - html

Question

core-list is not showing (Polymer 0.5.5) and I don't now how to set it.
At first I made it with puting height:100% into everywhere but it wasn't good when I wanted to use this in somewhere. The scrolling was missed up.
Now I want to make it with flex but nothing to see... The header is there just the core-list is missing. What should I change in my code?
<polymer-element name="me-table-list" attributes="items selectedItem mode selectable info minHeight marginTop" layout vertical flex>
<template>
<style>
core-animated-pages {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.row {
transition: 0.3s;
box-sizing: border-box;
height: 50px;
border-bottom: 1px solid #ddd;
padding-left: 15px;
padding-right: 15px;
cursor: default;
background-color: white;
vertical-align: middle;
}
.row:hover {
background-color: #eee;
overflow: hidden;
}
#container {
overflow: visible;
height: 100%;
}
.card {
position: absolute;
top: -100px;
left: 0;
bottom: 30px;
right: -80px;
border-radius: 3px;
z-index: 5;
text-align: start;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn {
width: 40px;
}
#header {
height: 50px;
padding-left: 15px;
padding-right: 15px;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
</style>
<me-table-style></me-table-style>
<core-style ref="me-table-style"></core-style>
<table-element></table-element>
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div id="container" layout vertical flex>
<div layout vertical flex>
<core-animated-pages selected="{{detailSelector}}" transitions="hero-transition cross-fade" layout vertical flex>
<section layout vertical flex>
<div hero-p cross-fade hero-transition flex>
<paper-shadow style="background-color:white;">
<paper-shadow id="header" hero-id="card" class="title" layout horizontal center>
<template repeat="{{title in items.titles}}">
<div class="col-{{title.index}}">
<span>{{title.text}}</span>
</div>
</template>
</paper-shadow>
<div layout vertical flex style="overflow:auto">
<core-list data="{{items.rows}}" height="120" selection="{{selection}}" flex>
<template>
<div class="row" layout horizontal center hero?="{{selection === model}}">
<template repeat="{{column in model.columns}}">
<template if="{{column.type === 'text'}}">
<div class="col-{{column.index}}">
<span>{{column.text}} </span>
</div>
</template>
<template if="{{column.type ==='buttonOne'}}">
<div class="col-{{column.index}}">
<paper-button raised class="btn" on-tap="{{btnOneClicked}}" label="1">
{{column.text}}
</paper-button>
</div>
</template>
<template if="{{column.type ==='checkbox'}}">
<div class="col-{{column.index}}">
<paper-checkbox checked="{{column.text}}">
</paper-checkbox>
</div>
</template>
</template>
</div>
</template>
</core-list>
</div>
</paper-shadow>
</div>
</section>
<section id="details" style="height:100%; width:100%;">
<div class="card" hero cross-fade hero-transition>
<core-signals on-core-signal-close="{{closeRow}}"></core-signals>
<div horizontal hero end-justified layout self-stretch>
<paper-icon-button icon="close" on-tap="{{closeRow}}" style="z-index:5;" hero></paper-icon-button>
</div>
<content item="{{row}}" hero-id="card" selected="[card]" class="content" hero fit> </content>
</div>
</section>
</core-animated-pages>
</div>
</div>
</template>

Answer 1

set core-list height in pixel.