Material-ui: Long tab names don't wrap in IE11

[amysutedja]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Long tab names should wrap in Internet Explorer 11.

Current Behavior

Long tab names don't wrap.

Steps to Reproduce

Viewing the Material UI tabs with wrapped fields demo in IE11 immediately shows the issue.

https://material-ui.com/demos/tabs/

Context

A slim majority of our users are corporate users who are required to use IE11, so it's important for us to have as much visual parity as possible between IE11 and non-IE11 browsers.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.3.0 |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

@amysutedja Nice catch, you should be able to add width: 100% to this style rule in order to solve the problem:
https://github.com/mui-org/material-ui/blob/5c70845cc4d60918c528f3aa58416ed8851a259c/packages/material-ui/src/Tab/Tab.js#L82
Do you want to work on it? :)

P.S. it seems we are using more divs than needed. We could try to remove some intermediate elements.

[patesson]

I can pick this up if that's ok

[oliviertassinari]

Sure :)

[patesson]

Got a pull request here. #13230
I've not done one of these before so not sure if it's done right. Looks like it's failed its CI but I think that's expected due to the change.