CODEWITHSUNDEEP
javascripthtmlcssuser-interfacetailwind-css
Siddiqui Noor
Siddiqui Noor

Reputation: 8036

Tailwind css fixed width not working with other element in flex

I have to place two column side by side. One of these columns has a fixed width. I am really trying hard to understand why the fixed width in one column is not working on Tailwind CSS flexbox.

I have the following code:

<div class="flex flex-row justify-between items-start shrink-0">
    <p class="mt-4 h-14 overflow-hidden leading-7">This title pushed back the next element</p>
    <div class="p-1 w-16 h-16 text-white text-center">
        <p class="text-sm">05</p>
        <p class="text-3xl leading-none font-bold">JUNE</p>
    </div>
</div>

Tailwind Version: 3.0.23

Output:

enter image description here

Inspect Element:

enter image description here

Expected output:

enter image description here

Upvotes: 10

Views: 26843

Answers (4)

Brandon Johnson
Brandon Johnson

Reputation: 327

In my case, some of the rules were working but some of the ones with prefixes such as lg:flex and lg:w-72 were not getting picked up. My problem was I reorganized using the new app router and I forgot to update my tailwind.config.js to include that path.

I changed:

  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],

to this:

  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],

and it worked!

Upvotes: -1

krishnaacharyaa
krishnaacharyaa

Reputation: 25120

Actually when using flex , it shrinks itself if not explicitly specified for responsive design

Refer the tailwind flex-shrink documentation https://tailwindcss.com/docs/flex-shrink

It says to use the flex-shrink-0 css property i.e shrink-0 class to avoid the width from being shrinked due to variable width size.

So code should look like:

<div className="flex flex-row justify-between items-start">
      <p className="mt-4 h-14  overflow-hidden leading-7">
        This title pushed back the next element and this is the long text to
        check the overflow of the text and lets see if this actually works
      </p>
      <div className="p-1 w-16 h-16 text-white text-center shrink-0 bg-purple-500">
        <p class="text-sm">JUN</p>
        <p class="text-3xl leading-none font-bold">05</p>
      </div>

And the output looks like :

enter image description here

Upvotes: 15

MagnusEffect
MagnusEffect

Reputation: 3925

You can simply use flex properties here while keeping the width same.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-between items-start ">
    <div>
    <p class="py-2 px-2 h-14 overflow-hidden leading-6">This title pushed back the next element
       his title pushed back the next element.</p>
    </div>
    <div class="px-2 w-16 h-16 mr-2 text-white bg-purple-500 text-center">
        <p class="text-sm">June</p>
        <p class="text-3xl leading-none font-bold">05</p>
    </div>
</div>

Upvotes: -1

Hazrat Gafulov
Hazrat Gafulov

Reputation: 348

<div class="flex flex-row justify-between items-start shrink-0">
    <p class="mt-4 h-14 w-[70%] overflow-hidden leading-7">This title pushed back the next element</p>
    <div class="p-1 w-[15%] h-16 text-white text-center">
        <p class="text-sm">05</p>
        <p class="text-3xl leading-none font-bold">JUNE</p>
    </div>
</div>
Maybe like this work

Upvotes: 0

Related Questions