I’m trying to create a scrollable table in an HTML layout. The table should take up the remaining height of the container, and only the table should scroll vertically if the content exceeds the available space. The rest of the layout (header, sidebar) should remain fixed.

I have an item in the middle of a few divs. How do I escape that middle item on larger breakpoints?
I’m using Tailwind in this project too.

I have a set of nested flexboxes, each with a flex-1 div on the left and a fixed width div on the right. I want the inner-most left div to take up available space and truncate its text if necessary.

I have some trouble to align a div on the left and another div centered from its parent with Tailwind.

I have some trouble to align a div on the left and another div centered from its parent with Tailwind.

I don’t understand why my image change the height of my div, I’m in flex-col so basis change the height and not the width (in flex-row). So I have an height defined by my basis-28 but with my image whiwh is big the height change and become greater but I would like to not resizing my div I would like to reduce the height and so the dimensions of my image and not the opposite.

I’d like to design in CSS (ideally tailwind) a table (or flexbox) with rounded corners for internal borders to mimick a deck of cards like: