如何使聚合物紙卡生長以適應其容器？

我有一個兩列設置的flexbox容器，其中列是相同的高度。 div工作得很好，我可以看到他們的背景顏色正確排列。如何使聚合物紙卡生長以適應其容器？

但是，當我在每列中放置一張紙卡時，卡片不會填滿空間 - 所以如果左側卡片比右側卡片長，我會在右側卡片下方看到背景顏色。

當試圖設置身高：100％時，卡會變得超長，並將整頁向下推。

如果我將容器的高度硬編碼爲500px，這可行，但我寧願不這樣做。我怎麼才能讓卡片填滿他們的欄目，這些欄目的高度已經與最長卡片的長度相匹配了？

<dom-module id="my-app"> 
    <template> 
    <style include="iron-flex iron-flex-alignment"> 

    :host { 
    display: block; 
    } 

.twocols{ 
     display: flex; 
     width: 100%; 
     height: auto; 
     background: lightblue; 
     } 

.col1{ 
     width: 50%; 
     background: black; 
     } 

.col2{ 
     width: 50%; 
     background: orange; 
     } 
</style> 

<div class="twocols"> 

    <div class="col1"> 
    <paper-card heading="Hello1" style="width: 100%"> 
     <paper-item><paper-item-body><div>Hi there</div></paper-item-body></paper-item> 
    </paper-card> 
    </div> 

    <div class="col2"> 
    <paper-card heading="Hello" style="height: 100%; width: 100%"></paper-card> 
    </div> 

</div>

來源

2016-12-15 Bobby Battista

你的代碼在[codepen]中工作正常（http://codepen.io/tony19/pen/bBQYVK?editors=1010） – tony19

哦很多Tony19你是對的......可能會使這些卡片成長只要我做身高：100％？它必須在代碼 –

其他地方其實我做了一個新的HTML文件，只包括我們粘貼到codepen，問題仍然存在。我在鉻和safari中嘗試過。接下來我可以做什麼？ –

包含卡片的聚合物元素本身需要將其顯示器設置爲flex。

如果沒有：host {display：flex;}行，卡片不會自動增長以填充其容器。由於某種原因，我仍然不知道，設置高度：100％會導致卡的增長太大。 Flex節省了一天的時間。

請注意，我製作了自定義元素，它們只是具有數據輸入功能的紙卡，用於處理和顯示卡片中的數據。

最重要的部分在這裏：

<dom-module id="vehicle-info"> 
    <template> 
    <style include="iron-flex iron-flex-alignment"> 
     :host{ 
     display: flex; 
     } 
     paper-card { 
     width: 100%; 
     } 
    </style> 
...

這裏：

<div class="twocols">  
     <div class="col1"> 
      <vehicle-info style="width: 100%;" data={{data.vehicleData}}></vehicle-info> 
     </div> 
     <div class="col2"> 
      <customer-info style="width: 100%;" data={{data.customerData}}></customer-info> 
     </div> 
     </div>

所以，現在每列50％的寬度，每個元素是其列的寬度的100％，並它將伸展（彎曲）到底部，並且每張紙卡將是其自定義元素的100％寬度。

來源

2016-12-16 04:06:41

如何使聚合物紙卡生長以適應其容器？

回答

相關問題