I implemented this thing so many times, yet every time I try to do this again, I struggle.

The goal is simple: the modal needs to take at most x vh of vertical space and its content should scroll, when it doesn’t fit the container. Else, the entire modal should shrink vertically to take only the space that it needs.

Here’s the minimal example:

https://codepen.io/0ctothorp/pen/gOoRKXQ?editors=1100

The most important bits are:

• height: max-content together with max-height: 80vh on .modal element
  • max-content basically means: take as much space as my content needs. That’s why we need to limit the space occupation with max-height.
• overflow-y: auto on modal content wrapper (.modal-content-overflow) and overflow: hidden on entire modal wrapper (.modal)
  • the element containing the content that actually stretches the modal doesn’t need the overflow rule
  • it’s a job of the container to control its child overflowing behaviour

Also, let’s not forget about our best friend: column flex. It makes everything easier to lay out inside the modal. Did you notice how I didn’t have to set any height value for the header, main and footer elements? Yet, everything sits exactly where it needs to be.

Hopefully this post proves itself helpful for me and/or you in the future 😉