ポリマーペーパーカードをその容器に合うように成長させる方法は？

Question

フレックスボックスのコンテナに2列の設定があります。ここでは列の高さは同じです。 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> 

Answer 1

カードを含むポリマー要素自体は、ディスプレイを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> 
... 

そして、ここで：だから今、各列は、50％の幅である

<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> 

、各要素は、その列の幅の100％であり、かつそれは底に伸び（フレックス）、各紙カードはカスタム要素の100％の幅になります。