我正在使用Google的Polymer库，我在（复杂）flex布局中遇到了铁列表问题。列表未呈现。
这是我的HTML：
<!doctype html>
<html>
<head>
<title>iron-list and flex layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:900">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<!--<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">-->
<!--<link rel="import" href="bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html">-->
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-list/iron-list.html">
<style is="custom-style">
* {font-family: Roboto}
body, html {width:100%;height:100%;margin:0;padding:0;border:0;overflow-y: hidden;}
.header {height: 50px;}
.footer {height: 30px;}
.header-bg {background: #f4f4f4;}
</style>
</head>
<body unresolved class="flex vertical layout self-stretch">
<template is="dom-bind">
<iron-ajax id="get_filltext_ajax" auto
url="//www.filltext.com/"
params='{"rows": "100", "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}",
"city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "integer": "{number|100}",
"business": "{business}", "index": "{index}"}'
handle-as="json"
loading="{{loading}}"
last-response="{{people}}">
</iron-ajax>
<div class="header header-bg">header</div>
<div class="vertical layout flex">
<div class="horizontal layout ">
<div class="flex header-bg">header left</div>
<div class="flex header-bg">header right</div>
</div>
<div class="horizontal layout flex self-stretch">
<div class="flex horizontal layout" style="border: solid 2px #00e034;">
<!-- content left-->
<!--<iron-list items="[[people]]" as="item" style="height:500px;width:300px;">-->
<iron-list items="[[people]]" as="item" class="self-stretch">
<template>
<div>
<div class="item">
<div class="primary dim">[[item.index]]</div>
<div class="pad">
<div class="primary"><span>[[item.fname]]</span> <span>[[item.lname]]</span></div>
<div class="secondary"><span>[[item.address]]</span> <span>[[item.city]]</span></div>
<div class="secondary"><span>[[item.city]]</span>, <span>[[item.state]]</span> <span>[[item.zip]]</span></div>
<div class="secondary dim">[[item.business]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</div>
<div class="flex" style="border: solid 2px #e00034;">content right</div>
</div>
<div class="horizontal layout header-bg">
<div class="flex self-end">footer left</div>
<div class="flex self-end">footer right</div>
</div>
</div>
<div class="footer header-bg">
<paper-button>Footer</paper-button>
</div>
</template>
</body>
</html>
如果定义了铁列表标签的尺寸，则列表将可见： 请参阅：https://goo.gl/photos/yBbM9jtndyAtKiBCA
左右内容div的绿色和红色（底部）边框可见。
我尝试将flex和/或自我拉伸设置为铁列表标签但没有成功。
期望的结果：铁列表应该使用（红色）左内容div的全宽和高度。
答案 0 :(得分：1)
我设法得到一个聚合物元素包含的铁列表，以填充整个屏幕/浏览器大小的铁页部分，并在该边界内滚动（即，而不是溢出并导致该部分本身滚动）。顶级html如下所示：
<body class="fullbleed layout vertical">
<iron-pages>
<section class="layout vertical fit">
<div>title element that uses a varying amount of space</div>
<div class="flex">
<my-list-element/>
</div>
</section>
</iron-pages>
</body>
my-list-element看起来像这样：
<dom-module id="my-list-element">
<style>
:host {
display: block;
height: 100%
}
iron-list {
height: 100%;
}
</style>
<template>
<iron-list items={{whatever}}>
<template>
.... etc ....
</template>
</iron-list>
</template>
</dom-module>
这会导致填充屏幕，并且铁列表会在包含my-list-template实例的div中滚动。这是我发现实现这一目标的唯一方法。其他一切导致列表溢出页面，因此整个页面滚动（我不想要）。
这方面的重要方面是：
编辑：在Chrome 43中，整个部分滚动。在Chromium 39（我测试原始版本）中，它在div中滚动。无论哪种方式，都会显示铁列表。如果我理解如何让它在flexed div的边界滚动，我会更新。
答案 1 :(得分：0)
解决了（https://goo.gl/photos/J2Ua6phhVrYgLitE6）：
<!doctype html>
<html>
<head>
<title>iron-list and flex layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/iron-list/iron-list.html">
<link rel="import" href="bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<style>
body, html {width:100%;height:100%;margin:0;padding:0;border:0;overflow-y: hidden;}
.scrolly {overflow-y: scroll;}
</style>
</head>
<body class="fullbleed layout vertical">
<dom-module id="my-list-element">
<style>
:host {
display: block;
height: 100%
}
iron-list {
height: 100%;
}
</style>
<template>
<iron-list items={{items}}>
<template>
<div class="primary dim">[[item.name]]</div>
</template>
</iron-list>
</template>
<script>
(function(){
Polymer({
is: 'my-list-element',
properties: {
items: {
type: Array,
value: []
}
},
ready: function() {
console.log('ready list');
for (var i=0; i< 100; i++) {
this.push('items', {name:'Test item ' + this.items.length });
}
}
});
})();
</script>
</dom-module>
<iron-pages>
<section class="layout vertical fit">
<div>title element that uses a varying amount of space<br>second header row</div>
<div class="horizontal layout ">
<div class="flex header-bg"><b>header left</b></div>
<div class="flex header-bg"><b>header right</b></div>
</div>
<div class="flex horizontal layout ">
<div class="flex header-bg scrolly"><my-list-element /></div>
<div class="flex header-bg scrolly"><my-list-element /></div>
</div>
<div class="horizontal layout ">
<div class="flex header-bg"><b>footer left</b></div>
<div class="flex header-bg"><b>footer right</b></div>
</div>
<div>Footer http://stackoverflow.com/questions/31964572/polymer-v1-0-iron-list-in-a-complex-flex-layout-is-not-visible</div>
</section>
</iron-pages>
</body>
</html>