Полимерная железная роспись с флексбоксом

Question

Я изо всех сил пытаюсь получить iron-list хорошо играть с iron-flex-layout а также paper-card, То, на что я надеюсь, это для paper-card согнуть, развернуть по обеим осям, чтобы покрыть страницу (с ее полем в качестве бампера), а затем для iron-list развернуть вертикально в своем контейнере, чтобы показать мой железный список со всей его магией "виртуального списка".

Куда я иду не так?

<script src="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-card/paper-card.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-progress/paper-progress.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-list/iron-list.html">

<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
  body {
    margin: 0;
    height: 100vh;
  }

  paper-card {
    margin: 1em;
  }

  iron-list {
    border-bottom: 1px solid #f00;
    border-top: 1px solid #000;
  }
</style>

<div class="vertical layout">
  <template is="dom-bind" id="app">
    <paper-card heading="My paper card" class="flex">
      <div class="card-content layout vertical">
        <div>[[listing.length]]</div>
          <iron-list items="[[listing]]" class="flex">
            <template>
              <div class="layout horizontal">
                <div>[[item.name]]</div>
                <div>[[item.value]]</div>
              </div>
            </template>a
          </iron-list>
      </div>
    </paper-card>
  </template>
</div>

<script>
  "use strict";

  window.addEventListener('WebComponentsReady', e => {
    app.listing = [];
    for (var i = 0; i < 100; i++) {
      app.push('listing', { name: i, value: i });
    }
  });
</script>

Скрипка: https://jsfiddle.net/4czLkjfj/

Answer 1

У тебя есть body элемент установлен в height: 100vh,

Однако эта высота не наследуется гибким контейнером на один уровень ниже.

Одним из решений является добавление display: flex в body, Это создает гибкий контейнер, который автоматически применяется align-items: stretch детям.

body {
  display: flex;
  align-items: stretch; /* initial setting; can be omitted */
}

div.vertical.layout {
  flex: 1; /* full width */
}

пересмотренная скрипка

Другим решением было бы просто указать гибкому контейнеру наследовать высоту родителя.

div.vertical.layout {
  height: 100%;
}

пересмотренная скрипка

---

Пересмотренное решение на основе отзывов в комментариях: демо