纸阴影破坏了所需的布局。

Question

考虑一下这个标记：

<custom-element horizontal layout>
    <div>Some text here</div>
    <div flex><i>space</i></div>
    <paper-toggle-button></paper-toggle-button>
</custom-element>

其中custom-element声明如下：

<polymer-element name="custom-element" noscript>
    <template>
        <paper-shadow z="1">
            <content flex></content>
        </paper-shadow>
    </template>
</polymer-element>

带有flex属性的中间flex应该填充所有可用空间，但如果存在paper-shadow，则不会填充。下面是一个比较(顶部是与paper-shadow)：

​

​

为什么会发生这种情况？

Answer 1

在输入答案时，我想出了一个解决方案，如下所示：

<polymer-element name="custom-element" noscript>
    <template>
        <paper-shadow flex horizontal layout z="1">
            <content flex></content>
        </paper-shadow>
    </template>
</polymer-element>