Stacking V-Card children overlaps and misaligns - vue.js

Question

I'm trying to stack a v-card-title on top of a v-card-subtitle and then v-card-text and the text is overlapping. Don't these elements vertically stack by default?:
<v-main>
<v-container fluid style="padding:0px">
<v-row no-gutters>
<v-col :cols="12" :md="6">
<v-card
height='100%'
style="position: relative"
elevation="0">
<v-card-title
class="header">
lorem ipsum dolor
</v-card-title>
<v-card-subtitle class="subHeader">
lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor
</v-card-subtitle>
<v-card-text class="subText">
lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum
dolor lorem ipsum dolor dolor lorem ipsum dolor dolor lorem ipsum
dolor
</v-card-text>
</v-card>
</v-col>
<v-col :cols="12" :md="6">
<v-img :src="{myImage}"></v-img>
</v-col>
</v-row>
{...about 4 more rows identical to above...}
</v-container>
</v-main>
and here are my styles:
.header{
font-family: 'Cormorant Garamond', serif;
font-size: 85px;
}
.subHeader{
font-family: 'Montserrat', sans-serif;
font-size: 28px;
}
.subText{
font-family: 'Montserrat', sans-serif;
font-size: 15px;
letter-spacing: 1.5px;
color:#333;
}
and then if I try to vertically + horizontally center everything using this on the v-card, everything then lines up horizontally:
class="d-flex align-center justify-center"
What am I just not getting here?

Answer 1

Using d-flex turns your card into a flexbox container transforming direct children elements. What you're seeing is the default behavior of flex children. They display in a row because by default the flex-direction property is set to row. Read more at MDN Web Docs.
Anyway, you don't need to use d-flex in this case. Vuetify provides a helper class fill-height that will center the contents of the v-container. From the docs:
fill-height applies height: 100% to an element. When applied to v-container it will also align-items: center.
For example:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container fluid fill-height style="padding:0px">
<v-row no-gutters justify=center>
<v-col cols="6">
<v-card class="" elevation="2" >
<v-card-title class="header">
lorem ipsum dolor
</v-card-title>
<v-card-subtitle class="subHeader">
lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor
</v-card-subtitle>
<v-card-text class="subText">
lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolor dolor lorem ipsum dolor dolor lorem ipsum dolor
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>