vuetify.js v-选择最小高度限制？

Question

正如您从下面看到的，我正在尝试减小元素的高度v-select，但似乎我可以设置的最小高度有限制。即之后height = 40，进一步降低高度似乎不再起作用了。无论如何，有没有办法围绕这个限制，以便我可以使这个元素更小？我需要这个，因为我需要将它放入一个相对较小的 div 中。提前致谢 -

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
<v-app>
  <v-layout row>
      <v-select
        label="height=80"
        outline
        height="80"
        :items="years">
      </v-select>
      <v-select
        label="height=60"
        outline
        height="60"
        :items="years">
      </v-select>
      <v-select
        label="height=40"
        outline
        height="40"
        :items="years">
        </v-select>
      <v-select
        label="height=20"
        outline
        height="20"
        :items="years">
      </v-select>
  </v-layout>
</v-app>
</div>

Answer 1

ofmin-height组件v-select是56px由以下 CSS 规则定义的：

     .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
       min-height:56px;
     }

让我们通过设置来覆盖它：

  .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
   min-height: auto!important;
  }

但结果并不完美，内容也没有正确对齐，为了解决这个问题，我们将在上述规则中添加以下属性：

  display: flex!important;
  align-items: center!important

     .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
       min-height:56px;
     }

  .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
   min-height: auto!important;
  }

  display: flex!important;
  align-items: center!important