Высота дочернего элемента Flexbox в его содержимом

У меня есть контейнер с display: flex, и его высота выше, чем его содержимое. Я использую Vuetify (vuejs)

Например:

У меня есть v-col с 2 пролетами

<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 в столбец, то:

высота пролетов больше, чем их содержание!

Если я поставлю flex-direction в строку, то:

то же самое происходит.

Я ожидаю, что высота пролета - это только его высота содержимого

Редактировать:

Я пытаюсь снова, и проблема заключается только в том, что я пытаюсь поместить внутренний гибкий столбец дисплея внутри карты: вот код, который можно попробовать в 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 есть класс с высотой строки, решение - отредактировать эту высоту строки