I'm trying to create a layout with a single row that has a button aligned to the right edge, and the rest of the space filled with multiple buttons inside a v-chip-group. There are more buttons than can fit in the available space, so I want the v-chip-group to shrink or expand between the left edge and the right button (the v-chip-group component allows you to scroll through the content).
Currently, the right button gets pushed to a new row instead of staying on the same line, and the v-chip-group fills the entire row.
<v-row no-gutters>
<v-col>
<v-chip-group>
<v-btn text @click="goTo(drive)" v-for="drive in drives" :key="drive.name">{{ drive.name }}</v-btn>
<v-btn text @click="goTo(home)">Home</v-btn>
<v-btn text v-for="location in favourites" :key="location.name">{{ location.name }}</v-btn>
</v-chip-group>
</v-col>
<v-col>
<v-btn text><v-icon>mdi-close</v-icon></v-btn>
</v-col>
</v-row>