Переполнение авто на flex div обрезает изображение сверху

Question

Я реализовал средство просмотра изображений, где я могу поворачивать изображение и иметь возможность делать увеличение и уменьшение масштаба.

Увеличение и уменьшение хорошо работают, а также вращаются. Но когда я поворачиваю изображение и увеличиваю его, изображение обрезается сверху.

Я попытался добавить абсолютную позицию к изображению и задать ей верх: 0, но ни то, ни другое не помогло.

Кто-нибудь может помочь?

.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: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    // Optional support to confirm scroll behavior makes sense in IE10
    //-ms-flex-direction: column;
    //-ms-flex-align: center;
    //-ms-flex-pack: center;
    height: 100%;
    position: relative;
}
.modal-container .modal-window .modal-content {
  transform: rotate(90deg) scale(2);
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 10px;
	margin: auto;
  position:absolute;
  top:0;
  flex:none;
  align-self:flex-start;
}

<div class="modal-container">
    <div class="modal-window">
        <img class="modal-content" src="http://www.hislider.com/templates/erishorizontal/dataimages/7.jpg">
        </div>
    </div>
</div>

http://jsfiddle.net/abx8c13j/16/

Answer 1

.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: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    // Optional support to confirm scroll behavior makes sense in IE10
    //-ms-flex-direction: column;
    //-ms-flex-align: center;
    //-ms-flex-pack: center;
    height: 100%;
    position: relative;
}
.modal-container .modal-window .modal-content {
  transform: rotate(90deg) scale(2);
  transform-origin: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    width: 100%;
    height: 100%;
    max-width: 25px;
    max-height: 25px;
    padding: 10px;
	margin: auto;
  flex:none;
  align-self:flex-start;
}

<div class="modal-container">
    <div class="modal-window">
        <img class="modal-content" src="http://www.hislider.com/templates/erishorizontal/dataimages/7.jpg">
        </div>
    </div>
</div>

.modal-container .modal-window .modal-content

Я изменил только эту область. Использовать фиксированные размеры для событий вращения и масштаба