Vuetify: [Bug Report] edge tab button width

[xmoki]

Versions and Environment

Vuetify: 1.0.0-beta.6
Vue: 2.5.13
Browsers: Microsoft Edge
OS: Windows 10

Steps to reproduce

you can see it on official docs too: ui components/tabs on edge browser
https://next.vuetifyjs.com/en/components/tabs

Expected Behavior

with enough space, tabs shouldn't use pagination

Actual Behavior

tab button width is too high, uses tab pagination unnecessarily

Reproduction Link

https://codepen.io/anon/pen/OQbboz

Other comments

to fix this, it's only needed to change display property order on .tabs__div
change this:
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
to:
display: inline-flex; display: -webkit-inline-box; display: -ms-inline-flexbox;

[johnleider]

This is a rendering/flex bug within Edge. You can tell by inspecting the DOM, turning display: inline-flex off, back on, then clicking a tab. They will all resize and everything looks correct.

[xmoki]

I noticed that too, but if you change the display property to be on top of the other browser prefixes it works. I just don't know if it breaks something else.
I'm ok with waiting and see how edge fixes their own flex problems.

[christianklauss]

I filed an issue linking to this one on the Edge issue tracker: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17489779/

[mritgupta]

thanks @xmoki, this fixed work for me

[johnleider]

I'm unable to reproduce this anymore. Can you confirm?