I have a layout, header + content + footer.The header and the footer both have static heights.The container has flex flex-col
and the content has flex-1.As long as the content inside the content element is not that much, everything is OK. But when I put more content in it, it grows vertically. I want to prevent it from growing vertically and force a vertical scroll on it.
Something like flex-1 max-h-flex-1
. I know we don't have max-h-flex-1
in Tailwind. But you got the idea.I can't use static length values. Therefore please only answer using flex or grid, or any other fluid way.How can I achieve that functionality?