Wie kann man eine Polymer-Papierkarte an ihren Behälter anpassen?

Question

Ich habe einen Flexbox-Container mit einer zweispaltigen Konfiguration, in der die Spalten identisch hoch sind. Die divs funktionieren gut, ich kann sehen, dass ihre Hintergrundfarben richtig aufgereiht sind.

Wenn ich jedoch eine Papierkarte in jede Spalte lege, füllen die Karten nicht den Platz - wenn also die linke Karte länger als die richtige ist, sehe ich Hintergrundfarbe in dem Feld unter der rechten Karte.

Wenn versuchen, Höhe: 100%, wird die Karte super lang und schiebt die ganze Seite nach unten.

Wenn ich die Höhe des Containers auf 500px festcode, funktioniert das, aber das möchte ich lieber nicht tun. Wie kann ich nur die Karten füllen ihre Spalten, die bereits Höhe in der Länge der längsten Karte übereinstimmen?

<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

Die Polymerelemente selbst, die die Karten enthalten, müssen ihre Anzeigen auf flex eingestellt haben.

Ohne die Zeile: host {display: flex;} würden die Karten nicht automatisch wachsen, um ihre Container zu füllen. Und aus irgendeinem Grund weiß ich immer noch nicht, Höhe einstellen: 100% würde die Karte zu groß wachsen lassen. Flex rettete den Tag.

Beachten Sie, dass ich benutzerdefinierte Elemente gemacht habe, die nur Papierkarten sind, auf denen Daten eintreffen und die Daten auf den Karten angezeigt werden.

Die wichtigsten Teile sind hier:

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

Und hier:

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

So, jetzt jede Spalte 50% Breite, wobei jedes Element 100% der Breite der Spalte ist, und es wird sich nach unten dehnen (flex), und jede Papierkarte wird 100% Breite ihres benutzerdefinierten Elements haben.