Quantcast
Viewing all articles
Browse latest Browse all 1317

How can I set an element to flex-1, and then prevent it from growing more than that and forcing scroll on its children?

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?


Viewing all articles
Browse latest Browse all 1317

Trending Articles