Help with complex layout
I have these 2 examples:
https://play.tailwindcss.com/Q0s5EWUdmI
https://play.tailwindcss.com/VDKrD8dZdu
I want the table and the wrappers to be no taller than the black border box.
I can't figure out why the first example works while the second one doesn't
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
1 Reply
I am not 100% on this but, by adding
display:flex on the parent along with both a flex-direction:column and a fixed height, the children are restrained to that height.
In your second example, as you are using flex on the main wrapper, there is no constraint on it's child and, consequentially, it's children.