Vuetify RadioGroup full width - vue.js

Question

i have a vuejs app which looks like this
<div id="app">
<v-app>
<v-content>
<v-container fluid>
<v-radio-group v-for="i in list" :key="i">
<v-layout row wrap>
<v-flex md4>
<v-radio label="Test 1" value="a"></v-radio>
</v-flex>
<v-flex md4>
<v-radio label="Test 2" value="b"></v-radio>
</v-flex>
<v-flex md4>
<v-radio label="Test 3" value="c"></v-radio>
</v-flex>
</v-layout>
</v-radio-group>
</v-container>
</v-content>
</v-app>
</div>
(https://codepen.io/anon/pen/NEErNz)
The Problem is that i want to have the radios in full with, but the css class v-input__control which is generated by vuetify blocks this.
Do you have any ideas how i could fix this?
Wrong -> v-input__control -> width: auto
Correct -> v-input__control -> width: 100%

Answer 1

Rithy awnser is almost right but it has 2 problems. The css code affects every control on app (and is not scoped) and v-input__contol class is not accesible by css or your css processor because is scoped inside de control group component. So:
Add a class to your radio group:
<v-radio-group class="radio-group-full-width" v-for="i in list" :key="i">
Then add the css styles (If you use SCSS, if not, see #JakesInTheSoup answer)
<style scoped lang="scss">
.radio-group-full-width {
>>>.v-input__control {
width: 100%
}
}
</style>
The ">>>" is important because it allows the css to access the embeded component scope

Answer 2

#Nacho Moco's answer worked for me with a slight modification to the braces:
<style scoped>
.radio-group-full-width >>>.v-input__control {
width: 100%
}
</style>

Answer 3

just apply style to overwrite existing class
<style scoped>
.v-input__control {
width: 100% !important
}
.v-label {
width: 100% !important
}
</style>

Answer 4

#Nacho Moco's answer worked for me with a slight modification:
<style scoped>
.radio-group-full-width >>> .v-input--radio-group__input {
justify-content: space-between;
}
</style>
Vue 3 gives an error for >>> and the suggested revision is in https://vuejs.org/api/sfc-css-features.html#scoped-css. Expected code is in the form :
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
The revised code is :
<style scoped>
.radio-group-full-width :deep(.v-input--radio-group__input) {
justify-content: space-between;
}
</style>

Answer 5

I achieved this with Traxo's comment. Here was my layout using Vuetify v1.5.11:
<v-radio-group v-model="selectedDate" class="radio-container d-flex">
<v-radio
class="radio-item"
color="primary"
v-for="item of items"
:key="item.id"
:value="item"
:label="'This is an individual item!'"
></v-radio>
</v-radio-group>
And my CSS:
.radio-container {
max-height: 60vh;
overflow-y: scroll;
.radio-item {
border-bottom: 0.1rem #E5E5E5 solid;
padding: 25px;
}
}