Set bootstrap modal body height by percentage

I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no effect. However, if I set the max-height to 400px it works as expected, but is not responsive. I am sure I am just missing something simple, but I can’t seem to get it to work.

Here is an example

Doesn’t work:

.modal-body {
    max-height:40%; 
    overflow-y: auto;
}

Works:

.modal-body {
    max-height:400px; 
    overflow-y: auto;
}