css Question posted in
Some basic documentation can be found here.

Css – Tailwind flex item adjust to max width

Got this flex component on Tailwind and want to ensure the item inside always use the full with even if the content is not enough widht, basically cover all the red box area.

Flex item with wrong width

<section class="mx-auto grid max-w-[1200px] grid-cols-1 px-5 pb-10">
    <div class="flex justify-between w-full gap-x-6 py-5">
        <div class="flex min-w-0 gap-x-4 flex-grow">
            <img class="h-24 w-24 flex-none rounded-md bg-gray-50"
                 src="./assets/images/product-chair.png"
                 alt="">
            <div class="min-w-0 flex-auto">
                <p class="text-sm font-semibold leading-6 text-gray-900">Leslie Alexander</p>
                <p class="mt-1 truncate text-xs leading-5 text-gray-500">[email protected]</p>
            </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
            <p class="text-sm leading-6 text-gray-900">Co-Founder / CEO</p>
            <p class="mt-1 text-xs leading-5 text-gray-500">Last seen
                <time datetime="2023-01-23T13:23Z">3h ago</time>
            </p>
        </div>
    </div>
</section>

If for example the text of the email is long enough it extend the item width but want to have it always.

Flex item with correct width

Tags:

2

Answers


  1. 0

    Ensure that the flex item inside the red box always covers the full width of its container, even if the content is not enough to fill the available width, you can adjust the CSS. Instead of using max-width, you can try with width or min-width. You can find the updated code in the below snippet.

    <section class="mx-auto grid w-[1200px] grid-cols-1 px-5 pb-10">
    <div class="flex w-full justify-between gap-x-6 py-5">
      <div class="flex min-w-0 flex-grow gap-x-4">
        <img class="h-24 w-24 flex-none rounded-md bg-gray-50" src="./assets/images/product-chair.png" alt="" />
        <div class="min-w-0 flex-auto">
          <p class="text-sm font-semibold leading-6 text-gray-900">Leslie Alexander</p>
          <p class="mt-1 truncate text-xs leading-5 text-gray-500">[email protected]</p>
        </div>
      </div>
      <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
        <p class="text-sm leading-6 text-gray-900">Co-Founder / CEO</p>
         <p class="mt-1 text-xs leading-5 text-gray-500">
           Last seen
           <time datetime="2023-01-23T13:23Z">3h ago</time>
         </p>
       </div>
    </div>
</section>
    Login or Signup to reply.
  2. 0 
    <section class="mx-auto grid max-w-[1200px] grid-cols-1 px-5 pb-10">
<div class="flex justify-between w-full gap-x-6 py-5">
    <div class="flex min-w-0 gap-x-4 flex-grow">
        <img class="h-24 w-24 flex-none rounded-md bg-gray-50"
             src="./assets/images/product-chair.png"
             alt="">
        <div class="min-w-0 flex-auto">
            <p class="text-sm font-semibold leading-6 text-gray-900">Leslie Alexander</p>
            <p class="mt-1 truncate text-xs leading-5 text-gray-500">[email protected]</p>
        </div>
    </div>
    <div class="flex flex-col items-end">
        <p class="text-sm leading-6 text-gray-900">Co-Founder / CEO</p>
        <p class="mt-1 text-xs leading-5 text-gray-500">Last seen
            <time datetime="2023-01-23T13:23Z">3h ago</time>
        </p>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search