Paper-tabs in Flexbox

[tjsavage]

When using paper-tabs (Polymer 1.0) inside a flexbox without a specific width, they disappear in IE (10 as well as 11).

<div class="horizontal layout center">

  <div class="flex">This is flex</div>

  <paper-tabs>
    <paper-tab>Paper</paper-tab>
    <paper-tab>Tabs</paper-tab>
  </paper-tabs>

</div>

Any solution as I guess I should be able to use it this way (I'm very new to Polymer).

[robrez]

+1 - I tested my app in IE11 today and saw this issue.

I made a couple of observations:

• Adding a "flex" attribute on the tabs themselves will cause them to be sized. Some folks may be alright with adding flex[1-12] on the paper-tabs element and compromising "make tabs as small as possible" for "make tabs use 1/3 of the space".
• I'm guessing that IE uses a different value for flex-basis than other browsers. The following classes can be used to achieve the desired behavior:

    paper-tabs::shadow #tabsContainer {
      flex-basis: auto !important;
    }
    paper-tabs::shadow #tabsContent {
      flex-basis: auto !important;
    }
    paper-tab {
      flex-basis: auto !important;
    }

I'm not sure if

• we're hitting a general IE problem that can be safely fixed in one of iron-flex-layout's classes
• the problem can be safely resolved by changing some css in paper-tabs
• some combination of the above
• none of the above - IE users are shunned.

[robrez]

I found this PR that has made the changes I noted, above, to address flex-basis problems in IE.

PolymerElements/iron-flex-layout#9

It looks like the issues are not limited to paper-tabs

Edit: Everything works well after applying the changes from that PR except that I still need to apply flex-basis: auto; to the paper-tab.

paper-tab.html applies --layout-flex to :host...

    --layout-flex: {
      -ms-flex: 1 1 0.000000001px;
      -webkit-flex: 1;
      flex: 1;
      -webkit-flex-basis: 0.000000001px;
      flex-basis: 0.000000001px;
    };

... and --layout-flex uses flex-basis: tiny;

[notwaldorf]

This looks like it may have been fixed in a recent PR. Please re-open if it's still an issue!

[kevinpschaaf]

Repro'ed here: http://jsbin.com/sozekajoti/edit?html,js,output

[robrez]

Rebased my PR #50