[Bug Report] Data Table footer does not render properly in IE11

[JeffreyStevens]

Environment

Vuetify Version: 2.1.11
Vue Version: 2.6.10
Browsers: Internet Explorer
OS: Mac OS 10.14.6

Steps to reproduce

You can see it in IE in our actual application but I can't get codepen to run in IE.

Expected Behavior

Footer 'Rows per page', selection drop down, pagination text, before and after icons run together (overlay each other).

Actual Behavior

Footer 'Rows per page', selection drop down, pagination text, before and after icons should not overlay each other.

Reproduction Link

https://codepen.io/jeff1132/pen/zYYQoZp

[JeffreyStevens]

Current fix in my SCSS file:

//------------------------------------------------------------
// These are workarounds to fix the footer display in IE11.
//------------------------------------------------------------
.v-dialog .v-data-footer__select {
  flex: 1 1 auto;

  .v-select {
    flex-basis: 50px; // set minimum width of select menu
  }
}

.v-list-item .v-list-item__content {
  flex-basis: 25px; // set minimum width of menu item
  overflow: auto; // override overflow: hidden

  // The following is for Chrome select drop-down.
  .v-list-item__title {
    width: fit-content;
  }
}

[oleksandrzaiats]

I also have same problems with footer in IE so it would be nice to have this fixed.

[jacekkarczmarczyk]

Duplicate of #9527