Не могу прокрутить до вершины изгиба, который переполняет контейнер ⇐ Html

[Anonymous]

, пытаясь сделать полезный модал, используя Flexbox, я нашел то, что кажется проблемой браузера, и мне интересно, есть ли известное исправление или обходной путь - или идеи о том, как его решить. Во -первых, получение модального окна вертикально центрировано, что работает так же, как и ожидалось. Второе состоит в том, чтобы заставить модальное окно прокручивать - внешне, чтобы все модальные оконные свитки, а не содержимое внутри него (это так, что у вас могут быть выпадчики и другие элементы пользовательского интерфейса, которые могут простираться вне границ модала - как настраиваемое сборщик даты и т. Д.) переполнить. In the above example, you can resize to force the overflow, and in doing so it allows you to scroll to the bottom of the modal, but not to the top (first paragraph is cut off).


.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
}< /code>



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


< /code>
< /div>
< /div>
< /p>
Это влияет на (ток) Firefox, Safari, Chrome и Opera. Он интересно ведет себя правильно в IE10, если вы прокомментируете CSS IE10 Prefixed CSS - я еще не стал тестировать в IE11, но предполагайте, что поведение соответствует поведению IE10. />https://jsfiddle.net/dh9k18k0/2/

Подробнее здесь: https://stackoverflow.com/questions/334 ... -container