5 Balloons

I have been recently working with some TailwindCSS Components, and while working on a navigation component, I ran into a problem wherein the items of flex items would not stretch to the full height of the flex.

Let’s see the problem with an example

        <div class="max-w-screen-lg mx-auto flex items-center h-14">
            <!-- Nav Links-->
            <ul class="flex text-gray-700 text-base">
                <li class="px-3 cursor-pointer bg-purple-100">Laravel</li>
                <li class="px-3 cursor-pointer">Livewire</li>
                <li class="px-3 cursor-pointer">TailwindCSS</li>
                <li class="px-3 cursor-pointer">Alpine JS</li>
                <li class="px-3 cursor-pointer">About Me</li>
            </ul>
        </div>

I have a div marked as flex and have items inside it which are vertically centered using items-center tailwind utility class. To demonstrate the height issue, I have applied background color to the first nav item. Here is what the output looks like

As you can see by the background color that the height of the nav-item is restricted.

For the Solution, let’s change each nav item to be a flex and mark items-center to each of the item.

        <div class="max-w-screen-lg mx-auto flex h-14">
            <!-- Nav Links-->
            <ul class="flex text-gray-700 text-base">
                <li class="px-3 cursor-pointer flex items-center bg-purple-100">Laravel</li>
                <li class="px-3 cursor-pointer flex items-center">Livewire</li>
                <li class="px-3 cursor-pointer flex items-center">TailwindCSS</li>
                <li class="px-3 cursor-pointer flex items-center">Alpine JS</li>
                <li class="px-3 cursor-pointer flex items-center">About Me</li>
            </ul>
        </div>

With the above code, we now have the flex items height stretched to the parent div height.