Как сделать полимерную бумажную карточку расти в соответствии с ее контейнером?

Question

У меня есть контейнер flexbox с двумя настройками столбца, где столбцы одинаковой высоты. Дивы работают очень хорошо, я вижу, что их фоновые цвета выравниваются правильно.

Однако, когда я помещаю бумажную карточку в каждый столбец, карты не заполняют пространство, поэтому, если левая карта длиннее правой, я вижу цвет фона в пространстве под правой карточкой.

Когда вы пытаетесь установить высоту: 100%, карта становится очень длинной и толкает всю страницу вниз.

Если я жестко запрограммирую высоту контейнера на 500 пикселей, это работает, но я бы предпочел не делать этого. Как я могу просто заполнить ваши колоды, которые уже соответствуют по высоте длине самой длинной карты?

<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

Сами полимерные элементы, содержащие карты, должны иметь свои дисплеи для гибки.

Без линии: 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% его пользовательского элемента.