Vuetify 2.x中v-card设max-width后IE11仍溢出的问题求助

Hey there, I’ve run into this exact IE11 quirk with Vuetify’s flex-based components before—let’s get your v-card behaving properly!

The core issue here is that IE11 has well-documented bugs with how it handles max-width inside flex containers (which v-layout relies on). Even with your polyfills (great call adding those for JavaScript compatibility), CSS layout bugs like this need targeted fixes.

Here are a few actionable solutions to try:

1. Force Box Sizing and Explicit Width Fallback #

IE11 sometimes ignores max-width unless there’s an explicit width value to anchor it to, and it can miscalculate dimensions if padding isn’t included in the width calculation. Add this scoped CSS to your component:

.ie-card-fix {
  width: 100%; /* Let the card fill its parent first */
  max-width: 90%; /* Then apply your desired max width */
  box-sizing: border-box; /* Ensure padding doesn't add to total width */
}

Update your template to include the class:

<template>
  <v-layout column>
    <v-card class="mx-auto pa-4 ie-card-fix" 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>

2. Tweak the Flex Container (v-layout) #

IE11’s flex implementation can force child elements to overflow if the container isn’t set to allow wrapping or shrinkage. Try adding align-start to your v-layout to prevent it from stretching the card unnecessarily:

<v-layout column align-start>

3. IE11-Specific Flex Shrink Fix #

If the above doesn’t work, add a media query targeting IE11 to ensure the card can shrink within the flex container:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ie-card-fix {
    flex-shrink: 1; /* Force IE11 to let the card shrink */
  }
}

Why This Works #

Your ES6 promise and Babel polyfills handle JavaScript compatibility, but IE11’s CSS engine has unique quirks with flexbox and dimension calculations. By explicitly setting width: 100% and box-sizing: border-box, we give IE11 clear rules to calculate the card’s size, while flex-shrink ensures it doesn’t overflow the viewport.

内容的提问来源于stack exchange，提问作者Claudia Piscociu