Why does Flexbox break PolymerElements/paper-tabs?

Question

When trying to style paper-tabs alongside iron-pages on a webpage within a div, using Flexbox, specifically display: flex, the tabs disappear. If I remove display: flex, they re-appear.

Example of HTML & CSS where tabs show:

<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>

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

But if I use Flexbox and add in the relevant display: flex and alignment properties

.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);
}

It breaks.

I checked the repository history and there was this problem in 2015, but apparently was resolved.