Vuetify v-card overflows on IE11 - vue.js

Question

I am trying to use a v-card with vuetify 2.x. The card overflows on IE11 even though its max-width is set to 90%.
I imported the following in main.js for browser compatibility.
import Es6Promise from 'es6-promise';
import 'babel-polyfill';
Es6Promise.polyfill();
My card is defined in the template as follows:
<template>
<v-layout column>
<v-card class="mx-auto pa-4" max-width="90%">
<v-card-title>Test</v-card-title>
<v-card-text class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
</v-card-text>
</v-card>
</v-layout>
</template>

Answer 1

Try to add div tag in the v-card content, then you could add <br> tag to add new line, or add CSS style (such as the word-wrap: break-word property) on the div tag to prevent content overflow.
sample code like this:
<div id="app">
<v-app id="inspire">
<v-card class="mx-auto" max-width="344" >
<v-card-text>
<div>Word of the Day</div>
<p class="display-1 text--primary">
be•nev•o•lent
</p>
<p>adjective</p>
<div class="text--primary">
well meaning and kindly.<br>
"a benevolent smile"
</div>
</v-card-text>
<v-card-actions>
<v-btn text color="deep-purple accent-4" > Learn More </v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>