I'm currently having an issue with vue-agile. As usual I have imported the component. Now here's the template with it's parent. Just to let you know, I'm using vuetify for my frontend and it's current parent is in flex display.

<v-row class="d-flex">
    <v-col>
        Some codes here...
    </v-col>
    <v-col>
        <template>
            <agile>
                <div class="slide">
                    <h3>slide 1</h3>
                </div>
                
                ...
                
                <div class="slide">
                    <h3>slide n</h3>
                </div>
            </agile>
        </template>
    </v-col>
</v-row>

The issue is vue agile expands the width of the parent div, adding a horizontal scroll to it. I tried making vue agile and it's corresponding tags into block and forced it with style block using !important in css but it still extends the width and while I've found similar questions on other platforms, the issue is not solved on their part either. I'm asking for help if there's anyone who encountered this and is there a workaround to fit vue-agile into a flexbox without extending it's width. Vue-agile doesn't even follow grids. I've tried adding cols into it but still didn't get the result I desired.

Here's the initial image without the vue-agile

Here's the one with vue agile. I used text for the sample but it still works similarly