Flex Grow Not Working TailWindCSS and VueJS

Issue

I am creating a page where the website will show a list of all the servers that he has joined.

I want to show each of them in a box and I want all the boxs on a row occupy all the space. However, it looks like it doesnt occupy all the space, some of them is left on the right side.

Here is the code for .vue file:

<template>
<div class="_container m-20">
    <div class="title text-5xl text-center">Your Servers</div>
    <br><br>
    <div class="cards flex flex-wrap">
        <div v-for="server in servers" :key="server.id" class="card w-96 py-4 px-8 rounded-lg my-20 ml-20 grow">
            <div class="flex justify-center md:justify-end -mt-16 flex-1">
                <img class="w-20 h-20 object-cover rounded-full server-icon" :src="'https://cdn.discordapp.com/icons/' + server.id + '/' + server.icon  + '.png'" v-if="server.icon" />
                <div class="w-20 h-20 object-cover rounded-full server-icon from-name text-2xl flex pt-1 items-center justify-center" v-else>{{server.name.split(" ").map(n => n[0].toUpperCase()).join("")}}</div>
            </div>
            <div>
                <h2 class="text-2xl font-semibold heading">{{server.name}}</h2>
            </div>
            <a :href="'/configure/'+ server.id ">
                <div class="flex justify-end mt-4">
                    <button class="font-medium name w-full rounded-lg p-4">Configure</button>
                </div>
            </a>
            <br>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import {
    ref
} from '@vue/reactivity';

export default {
    setup() {
        const servers = ref();

        (
            async () => {
                const res = await fetch("https://discord.com/api/users/@me/guilds", {
                    method: "GET",
                    headers: {
                        "Authorization": "Bearer " + window.localStorage.getItem("access_token")
                    }
                })

                const userGuilds = await res.json()

                servers.value = userGuilds

                console.log(userGuilds)
            }
        )()

        return {
            servers
        }
    },
};
</script>

<style scoped>
.server-icon {
    border: 3px solid #88C0D0;
}

.card {
    background-color: #3B4252;
    color: #D8DEE9;
}

.cards {
    flex-direction: row !important;
    flex-basis: 0 !important;
    flex-grow: 1 !important;
}

.heading {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 50px;
    font-family: "Comfortaa";
}

.name {
    background-color: #88C0D0;
    color: #2e3440;
    font-family: "Comfortaa";
}

._container {
    font-family: "Comfortaa";
}

.from-name {
    background-color: #3B4252;
}
</style>

Solution

You have to put your cards inside a wrapper class of flex then you can use flex sizes like here:

<div class="flex">
  <div class="flex-none ...">
    01
  </div>
  <div class="flex-1 w-64 ...">
    02
  </div>
  <div class="flex-1 w-32 ...">
    03
  </div>
</div>

You can read more here

Answered By - gguney