Polymer 聚合核心动画页面将内部元素高度设置为0

我对Polymer（以及网络编程）还很陌生，我在核心动画页面方面遇到了麻烦

我在一个div中有一组自定义元素，它们使用%表示高度和宽度，显示得很好。 然后我尝试将所有这些内容包装到一个核心动画页面中，如果我没有设置具体的高度，它会将高度折叠为0px。宽度和往常一样好

以下是我的CSS的一部分：

#tiles-container
    {
        padding-left: 1%;
        height: 85%;
        width: 98%;
        border: 2px;
        border-color: Black;
    }
main-menu-item
    {
        box-sizing: border-box;
        float: left;
        margin: 1%;
    }
@media (min-height:500px)
    {
        main-menu-item
        {
            height: 30%;
        }
    }
@media (max-height:600px)
    {
        main-menu-item
        {
            height: 135px;
        }
    }

其中主菜单项是我自己的组件。当屏幕高度小于600px时，它工作正常，但不适用于更高的屏幕。 以下是我的HTML的一部分：

<core-toolbar>
    ...
</core-toolbar>
<div class="container" style="overflow-y: auto;" flex>
    <core-animated-pages flex id="pages" selected="0" on-core-animated-pages-transition-end="{{transitionend}}"
        transitions="cross-fade-all hero-transition">
        <section>
            <div id="tiles-container" class="tiles-container" layout wrap horizontal around-justified center relative>
                //mi custom elements just thrown in here
                ...
            </div>
        </section>
    </core-animated-pages>
</div>
<core-toolbar>
     ...
</core-toolbar>

...
//mi自定义元素刚刚在这里抛出
...
...

如果有人能给我一个解决方案，而不是给我的自定义元素一个静态的高度，那就太好了。

---

谢谢你的阅读，对不起我的英语^^u

我看到了一个类似的问题，我试图嵌入多个包含核心动画页面的自定义元素，它们最终计算出高度：0并相互重叠。在我发现的所有使用核心动画页面的自定义元素中，元素总是在页面的末尾（我相信每个人都会将内容放在页面的底部，以避免这个高度问题）。我现在的解决方案是像你所做的那样显式地设置高度。设置显式高度对我来说没有意义，因为使用聚合物的全部目的是让我更容易地调整控件的大小。我宁愿不带动画也不愿丢失高度百分比。感谢您的回答：）我终于改变了核心动画页面的核心页面（花式的风格，在正式聚合物演示），我设法得到一个很好的动画过渡加上保持高度百分比的好处。我不知道这是否对你有用，但可能有用。我尝试切换到核心页面，看到了相同的行为。在我的情况下，一定是别的东西弄乱了高度。我现在就接受它。我注意到使用动画页面时，页面中的元素无论如何都会失去高度。对于核心页面，元素本身不会改变高度，但如果将它们放在div中，它们的反应与动画页面完全相同。如果我找到原因，我会让你知道，现在我只是不明白。