ImWaller's avatar

child get the minimum width of flex parent tailwindcss

Hello I want my element child to take the min width of the flex parent and child can be more flexible with the text content. I use the flex-1, grow-*, shrink-*, basis-*, min-w-* and max-w-* but nothing happen.

When i use inline-flex the child element shrink but not full. https://play.tailwindcss.com/UZSFa6JOwQ Any solution?

<nav class="mt-5 flex-1" aria-label="Sidebar">
  <div class="flex flex-col space-y-1 px-2">
    <span class="rounded-full bg-emerald-600 px-2 py-1 text-sm">PHP</span>
  </div>
</nav>
0 likes
7 replies
tisuchi's avatar

@imwaller Can you try this?

<nav class="mt-5 flex-1" aria-label="Sidebar">
  <div class="flex flex-col space-y-1 px-2 min-width-0">
    <span class="rounded-full bg-emerald-600 px-2 py-1 text-sm flex-grow">PHP</span>
  </div>
</nav>
ImWaller's avatar

@tisuchi I think the problem is the childrens before span php cause the problem but your solution work perfect.

CamKem's avatar

So you are trying to make a side bar?

You can just use a div set to absolute & flex, with a high z-value to display a side bar, then use alpinejs to show & hide it if you want. Something like this for a simple sidebar.

<sidebar class="fixed flex h-full sm:w-64 lg:w-96 bg-blue-500 z-50">
</sidebar>
ImWaller's avatar

@CamKem This is not the main sidebar, I try to implement the subsidebar. The example I take is from tailwindui bit the problem is not with the sidebar but the children of the subsidebar. This doesnt work for me.

ImWaller's avatar
ImWaller
OP
3 years ago
Best Answer
Level 1

I found it sometimes need the child element to be fit and need to use max-w-fit.

1 like

Please or to participate in this conversation.