Max-Height with set pixel value- Is it Hacky or necessary?

Question

I am attempting to style a bootstrap panel on a page for a small checklist app. Users can input as many 'to do' items as they so choose and see their list grow and grow.

In order to prevent the entire page from scrolling, I'd like to allow the list to scroll, inside the panel element.

I have set a max-height: 350px , but to me, this feels a little "hacktastic". I can't seem to find a solid solution using flexbox and I'm unsure if % values are the way to go either.

Is there a sure fire, silver bullet solution for this problem (my gut feeling is no, but I'll remain positive)?

HTML:

<div class="ChecklistContainer"> 
 {{ input loop to handle user input }}
<div>

CSS:

.ChecklistContainer {
    max-height: 350px;
    overflow: auto;
}

Answer 1

I think it's fine to use a max-height in order to achieve the desired look and feel. We use it all the time in our production softwares.