I'm trying to create a modal that has contents of dynamic height that needs to be scrollable if the height of the content goes beyond a certain value but also needs to have certain elements overflow it. To be specific, there are dropdowns within the modal that I don't want to expand the height of the modal but instead overflow the modal's boundaries if they happen to be at the bottom of the modal.

Setting overflow: visible on the modal content achieves this if the modal height is small but then if the height of the modal content increases beyond the height of the viewport, it's obviously unscrollable because of the aforementioned overflow: visible.

I've thought about checking the height of the modal with JS to decide whether it should be overflow: auto or overflow: visible, however that seems like a wonky solution and it means that if the modal is already near viewport height and I set the overflow property to auto to enable scrolling, I still lose the effect I'm looking for, which is for open dropdowns to go outside the modal's boundaries.

Is there a more elegant solution to this?