为何Flexbox会导致PolymerElements/paper-tabs组件失效？

当给包含paper-tabs的.header容器添加display: flex及相关Flexbox对齐属性时，tabs组件会消失；移除display: flex属性后，tabs可恢复正常显示。

正常显示的代码示例 #

HTML代码 #

<div class="header">
    <div class="tabs">
        <paper-tabs>
            <paper-tab id="edit-view">
                <span>Edit</span>
            </paper-tab>
            <paper-tab id="info-view">
                <span>Info</span>
            </paper-tab>
        </paper-tabs>
    </div>
</div>
<div class="tab-content">
    <iron-pages selected=${this._selectedTab}>
        <div class="tab-page">
        </div>
        <div class="tab-page">
        </div>
    </iron-pages>
</div>

CSS代码 #

.header {
    margin: 1rem 0px;
    padding: 0.6rem 0px;
    border-radius: 4px;
    background: rgb(223, 223, 223);
}

导致问题的CSS代码 #

当给.header添加Flexbox属性后，tabs消失：

.header {
    margin: 1rem 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 0px;
    border-radius: 4px;
    background: rgb(223, 223, 223);
}

问题原因 #

paper-tabs作为Polymer组件，内部布局依赖块级元素的默认尺寸计算逻辑。当父容器.header变为flex容器后，子元素.tabs的默认flex属性（flex-grow: 0、flex-shrink: 1、flex-basis: auto）会导致它被过度压缩，宽度可能变为0，最终让内部的paper-tabs组件无法显示。

解决方案 #

可以通过以下两种方式修复：

• 给.tabs容器设置flex: 1，让它占据父容器的可用空间：

.tabs {
  flex: 1;
}

• 或者给.tabs设置最小宽度，确保它能容纳内部的tabs内容：

.tabs {
  min-width: fit-content;
}

添加上述样式后，保留.header的Flexbox属性，paper-tabs即可正常显示。

内容的提问来源于stack exchange，提问作者Guybrush Threepwood