Dropdown elements (v-overflow-btn, v-date-picker) only partially displaying - vue.js

Question

The dropdown elements on my page (i.e., v-overflow-btn and v-date-picker) are automatically sized to 140px by 80px, even though I don't set any sizing limits in the vue component or its parents.
When I inspect the dropdown list created by v-overflow-btn, I can turn off the sizing settings (width: 140px, height: 80px) of the v-card, which appears to be a child of the v-select-list, and then the element displays like expected. I can't figure out what to change in Vue to keep this automatic sizing from happening
<template>
<div class="main">
<v-container>
<v-card class="accent" height="100%" width="100%">
<v-card-title>
Create New Event
</v-card-title>
<v-container >
<v-layout>
<v-card-text>
<v-form>
<v-overflow-btn
label="Tournament Type"
:items="tournamentOptions"
v-model="newEvent.type" >
</v-overflow-btn>
</v-form>
</v-card-text>
</v-layout>
</v-container>
</v-card>
</v-container>
</div>
</template>
styling from App.vue:
header {
background-color: #2A7342;
}
.nav li {
display: inline-block;
padding:20px;
color: #fff;
background-color: #2A7342;
}
.nav li a {
color: #fff;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
}
.nav li:hover {
background-color: rgb(216, 216, 216);
cursor: pointer;
color:rgb(44, 44, 44);
}
.nav li a:hover {
color:rgb(44, 44, 44);
}
.router-link-active {
background-color: rgb(44, 44, 44);
}
</style>
devtools screenshot