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.