帶有柔性盒的聚合物熨斗列表

我很努力地讓iron-list與iron-flex-layout和paper-card搭配很好。我所希望的是paper-card在兩個軸上展開展開以覆蓋頁面（其邊緣作爲保險槓），然後讓iron-list在其容器中垂直展開以顯示我的熨斗列表及其所有「虛擬列表「魔法。帶有柔性盒的聚合物熨斗列表

我哪裏錯了？

<script src="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/webcomponentsjs/webcomponents-lite.min.js"></script> 

<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-card/paper-card.html"> 
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-progress/paper-progress.html"> 
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-flex-layout/iron-flex-layout-classes.html"> 
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-list/iron-list.html"> 

<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"> 
    body { 
    margin: 0; 
    height: 100vh; 
    } 

    paper-card { 
    margin: 1em; 
    } 

    iron-list { 
    border-bottom: 1px solid #f00; 
    border-top: 1px solid #000; 
    } 
</style> 

<div class="vertical layout"> 
    <template is="dom-bind" id="app"> 
    <paper-card heading="My paper card" class="flex"> 
     <div class="card-content layout vertical"> 
     <div>[[listing.length]]</div> 
      <iron-list items="[[listing]]" class="flex"> 
      <template> 
       <div class="layout horizontal"> 
       <div>[[item.name]]</div> 
       <div>[[item.value]]</div> 
       </div> 
      </template>a 
      </iron-list> 
     </div> 
    </paper-card> 
    </template> 
</div> 

<script> 
    "use strict"; 

    window.addEventListener('WebComponentsReady', e => { 
    app.listing = []; 
    for (var i = 0; i < 100; i++) { 
     app.push('listing', { name: i, value: i }); 
    } 
    }); 
</script>

小提琴：https://jsfiddle.net/4czLkjfj/

來源

2017-03-20 Cheetah

你有body元素設置爲height: 100vh。

然而，這個高度並沒有被flex容器單層向下繼承。

一種解決方案是將display: flex添加到body。這將創建一個flex容器，它自動將align-items: stretch應用於孩子。

body { 
    display: flex; 
    align-items: stretch; /* initial setting; can be omitted */ 
} 

div.vertical.layout { 
    flex: 1; /* full width */ 
}

revised fiddle

另一種解決方案是簡單地告訴柔性容器繼承父的高度。

div.vertical.layout { 
    height: 100%; 
}

revised fiddle

修訂基於意見反饋解決方案：demo

來源

2017-03-20 23:30:26

這修復該問題的一部分 - 感謝.....但是仍然存在與問題「鐵列表」，其意圖是垂直向下擴展以填充容器。（我用不同顏色的頂部和底部邊框來突出顯示這個問題）...目前它具有'0'高度 – Cheetah

有了這個答案，我能夠進行額外的幾個步驟：https://jsfiddle.net/ 4czLkjfj/3 /。如果您編輯答案以添加此內容，我會將其標記爲已回答。 – Cheetah

帶有柔性盒的聚合物熨斗列表

回答

相關問題