Max-height и overflow не прокручиваются на ie9

У меня очень странная проблема на ie9, где div с max-высотой (заданный с помощью calc() и vh) и переполнением auto не прокручивается.

Вы можете видеть, что происходит, щелкнув по этому изображению (если GIF не загружается здесь):

Мой HTML:

<div class="modal">
  <div class="modal__title">Modal Title</div>
  <div class="modal__body">
    <p>When I am too tall, I should scroll on ie9, but I don't.</p>
  </div>
  <div class="modal__footer">Footer here</div>
</div>

Соответствующий CSS:

.modal {
  min-width: 500px;
  max-width: 800px;
  border-radius: 4px;
  max-height: 65vh;
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 15vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.modal__body {
    max-height: calc(65vh - 120px)); // 120 is the combined height of the header and footer
    overflow-y: auto;
}

Я не понимаю, почему это происходит, как ie9 поддержка vh, calc() и max-height. Любые идеи?

JSFiddle Demo: https://jsfiddle.net/sbgg5bja/3/

Ответ 1