CODEWITHSUNDEEP
htmlcssflexboxtailwind-css
Jenssen
Jenssen

Reputation: 1871

Flexbox items should not grow

I'm working with Flexbox and Tailwindcss.

I've got 2 rows. The first row has 3 items, second row has 1 item. For some reason the item in the second row is slightly bigger then the items in the first row.

What's could be wrong here I guess something with flexbox, because when I remove the flex class it fits correctly. But then the item's are not on the same row.

I've made a code snippet:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
    <div class="flex w-full">
        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex w-full">
        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Upvotes: 0

Views: 865

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16261

Use <div class="w-1/3 mt-2 p-2"> means apply padding and margin-top top the div in second line

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
    <div class="flex flex-no-shrink w-full">
        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="w-1/3 m-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-no-shrink w-full">
        <div class="w-1/3 mt-2 p-2">
            <div class="max-w-sm relative cursor-pointer rounded overflow-hidden shadow-lg">
                <div>
                    <img class="w-full cursor-pointer" src="https://tailwindcss.com/img/card-top.jpg">

                    <div class="px-6 py-4">
                        <div class="flex items-center">
                            <p class="font-bold text-xl">Name</p>
                        </div>

                        <p class="text-grey-darker text-base">
                            Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                        </p>
                    </div>
                </div>

                <div class="px-6 py-4">
                    <span class="label-grey mr-2">13 °C ☀️️</span>

                    <span class="label-grey mr-2">12 km/h 💨️</span>
                    <span class="label-grey">
                        <span class="center">
                             Netherlands

                            <img src="https://www.countryflags.io/nl/flat/16.png" style="max-width: none; height: min-content;" class="ml-1" width="16px" height="16px">
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Upvotes: 1

Related Questions