Não é possível rolar para a parte superior do item flexível que está transbordando contêiner

Portanto, ao tentar criar um modal útil usando o flexbox, descobri o que parece ser um problema no navegador e fico imaginando se há uma correção ou solução conhecida - ou idéias sobre como resolvê-lo.

A coisa que estou tentando resolver tem dois aspectos. Primeiro, mantendo a janela modal centralizada verticalmente, o que funciona conforme o esperado. O segundo é fazer com que a janela modal role - externamente, para que toda a janela modal role, não o conteúdo dentro dela (para que você possa ter menus suspensos e outros elementos da interface do usuário que possam se estender para fora dos limites do modal - como um selecionador de data personalizado etc.)

No entanto, ao combinar a centralização vertical com as barras de rolagem, a parte superior do modal pode se tornar inacessível quando começar a transbordar. No exemplo acima, você pode redimensionar para forçar o estouro e, ao fazer isso, permite rolar para a parte inferior do modal, mas não para a parte superior (o primeiro parágrafo é cortado).

Aqui está o link para o código de exemplo (altamente simplificado)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

Isso afeta o Firefox, o Safari, o Chrome e o Opera (atual). Ele se comporta de maneira interessante no IE10 se você comentar no CSS prefixado do IE10 vender - eu ainda não testei o IE11, mas suponho que o comportamento corresponda ao do IE10 .

Alguma idéia seria boa. Links para problemas conhecidos ou raciocínio por trás desse comportamento também seriam úteis.

questionAnswers(7)

yourAnswerToTheQuestion