Flexbox 子高度它的内容

Question

我有一个带有 display: flex 的容器，它的子高度高于它的内容。我正在使用 Vuetify (vuejs)

例如：

我有 2 个跨度的 v-col

<v-col style="display:flex;flex-direction:column">
  <span style="background-color:green;font-size:0.4rem">134 POSTS</span>
  <span style="background-color:green;font-size:0.4rem">120 POSTS</span>
</v-col>

如果我将 flex-direction 设置为列，则：

span 的高度大于它的内容！

如果我把 flex-direction 放到行上，那么：

同样的情况。

我预计span高度只有他的content高度

编辑：

我再试一次，只有当我尝试将 display flex 列放入卡片中时才会出现问题：这是在 vuetify 中尝试的代码

<v-card>
  <v-card-title>
    <v-row>
      <v-col class="d-flex" style="flex-direction: column">
        <span style="font-size: 0.6rem"> 123123 </span>
        <span style="font-size: 0.6rem"> 123121 </span>
      </v-col>
    </v-row>
  </v-card-title>
</v-card>

解决方案：

我找到了解决方案，v-card-title 有一个 class 和 line-height，解决方案是编辑这个 line-height

Answer 1

在 Vuetify 中，v-card-title class 默认设置了一个 line-height: 2rem，编辑这个可以解决问题！[=13=]

Flexbox 子高度它的内容

Flexbox child height it content

css

vue.js

nuxt.js

vuetify.js