聚合物核心列表没有显示

Question

核心列表没有显示（聚合物0.5.5），我现在不怎么设置它。

起初我把身高设为100％，但当我想在某个地方使用它时，它并不是很好。滚动被错过了。 现在我想用flex来制作它，但没有什么可以看到的...标题就在那里，核心列表不见了。我应该在我的代码中更改什么？

<polymer-element name="me-table-list" attributes="items selectedItem mode selectable info minHeight marginTop" layout vertical flex> 
    <template> 
     <style> 
      core-animated-pages { 
       position: relative; 
       left: 0; 
       right: 0; 
       top: 0; 
       bottom: 0; 
      } 

      .row { 
       transition: 0.3s; 
       box-sizing: border-box; 
       height: 50px; 
       border-bottom: 1px solid #ddd; 
       padding-left: 15px; 
       padding-right: 15px; 
       cursor: default; 
       background-color: white; 
       vertical-align: middle; 
      } 

      .row:hover { 
       background-color: #eee; 
       overflow: hidden; 
      } 

      #container { 
       overflow: visible; 
       height: 100%; 
      } 

      .card { 
       position: absolute; 
       top: -100px; 
       left: 0; 
       bottom: 30px; 
       right: -80px; 
       border-radius: 3px; 
       z-index: 5; 
       text-align: start; 
       overflow: hidden; 
       background: #fff; 
       box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
      } 

      .btn { 
       width: 40px; 
      } 

      #header { 
       height: 50px; 
       padding-left: 15px; 
       padding-right: 15px; 
       font-weight: bold; 
       border-bottom: 1px solid #ddd; 
      } 
     </style> 
     <me-table-style></me-table-style> 
     <core-style ref="me-table-style"></core-style> 
     <table-element></table-element> 

     <core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query> 


     <div id="container" layout vertical flex> 
      <div layout vertical flex> 
       <core-animated-pages selected="{{detailSelector}}" transitions="hero-transition cross-fade" layout vertical flex> 
        <section layout vertical flex> 

         <div hero-p cross-fade hero-transition flex> 
          <paper-shadow style="background-color:white;"> 
           <paper-shadow id="header" hero-id="card" class="title" layout horizontal center> 
            <template repeat="{{title in items.titles}}"> 
             <div class="col-{{title.index}}"> 
              <span>{{title.text}}</span> 
             </div> 
            </template> 
           </paper-shadow> 
           <div layout vertical flex style="overflow:auto"> 
            <core-list data="{{items.rows}}" height="120" selection="{{selection}}" flex> 
             <template> 
              <div class="row" layout horizontal center hero?="{{selection === model}}"> 
               <template repeat="{{column in model.columns}}"> 
                <template if="{{column.type === 'text'}}"> 
                 <div class="col-{{column.index}}"> 
                  <span>{{column.text}} </span> 
                 </div> 
                </template> 
                <template if="{{column.type ==='buttonOne'}}"> 
                 <div class="col-{{column.index}}"> 
                  <paper-button raised class="btn" on-tap="{{btnOneClicked}}" label="1"> 
                   {{column.text}} 

                  </paper-button> 
                 </div> 
                </template> 
                <template if="{{column.type ==='checkbox'}}"> 
                 <div class="col-{{column.index}}"> 
                  <paper-checkbox checked="{{column.text}}"> 
                  </paper-checkbox> 
                 </div> 
                </template> 
               </template> 
              </div> 
             </template> 
            </core-list> 
           </div> 
          </paper-shadow> 
         </div> 
        </section> 

        <section id="details" style="height:100%; width:100%;"> 
         <div class="card" hero cross-fade hero-transition> 
          <core-signals on-core-signal-close="{{closeRow}}"></core-signals> 

          <div horizontal hero end-justified layout self-stretch> 
           <paper-icon-button icon="close" on-tap="{{closeRow}}" style="z-index:5;" hero></paper-icon-button> 
          </div> 
          <content item="{{row}}" hero-id="card" selected="[card]" class="content" hero fit> </content> 
         </div> 
        </section> 
       </core-animated-pages> 
      </div> 
     </div> 
    </template> 

Answer 1

以像素为单位设置核心列表高度。