Search code examples
htmlcsspanel

How to properly set the min-height and the max-height to the panel and hide anything that is overflow?

I have panel

I want to set a min-height, and max-height to 850px; to my right panel right. ]

GOAL

If I don't have anything on the list yet, I still want the panel height to be 850px.

If I have so many added on the list, I do not want the panel height to increase beyond 850px.

I've tried

.nfTable   {
    min-height: 850px;
    max-height: 850px;
}

Should I use overflow:hidden ?

Solution

  • If you always want the panel to be 850px high you do not need to set min or max height. Min and max height are useful when a block can expand or shrink based on the content and you don't want it to expand or shrink beyond a specific size. So you should just use height: 850px;

    If the content in your panel might be longer than 850px you have a couple of options. You can hide it using overflow: hidden; if you don't want to see it at all, or you could use overflow: auto; to allow the content to scroll if it exceeds the height of your panel. See here for more info about the CSS overflow property.