Vuetify步进文本溢出

Question

我对Vuetify框架中的步进器组件有问题，其中步骤的文本标签在IE11中重叠。参见下面的codepen：

https://codepen.io/thorne51/pen/mjdQXb

HTML

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-stepper v-model="e1" :alt-labels="true">
        <v-stepper-header>
          <template v-for="(step, index) in steps">
            <v-stepper-step :step="step.stepNr">{{ step.label }}</v-stepper-step>
            <v-divider v-if="index + 1 < steps.length"></v-divider>
          </template>
        </v-stepper-header>

        <v-stepper-items>
          <v-stepper-content v-for="(step, index) in steps" :step="step.stepNr" :key="index">
            {{ step.stepNr }}. {{ step.label }}
          </v-stepper-content>
        </v-stepper-items>
      </v-stepper>
    </v-container>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  data () {
    let steps = [];
    for (let i = 0; i < 10; i++) {
      steps.push({
        label: 'regular driver\'s personal details',
        stepNr: i + 1,
      });
    }
    return {
      e1: 0,
      steps: steps,
    }
  }
})

CSS

.v-stepper__step {
  flex: 1 1;
}

Answer 1

容易。只需从flex: 1 1;类中删除v-stepper__step。