Я строю полноэкранный модальный режим и пытаюсь расположить содержимое по центру по вертикали, когда оно меньше экрана, и начать сверху и разрешить прокрутку, когда высота больше, чем высота контейнера. , Я пытаюсь использовать position:fixed
, чтобы расположить контейнер на экране, и display:flex; align-items:center;
, чтобы центрировать внутренний div. Когда контейнер короче внутреннего div, верхняя часть внутреннего div вырезается, даже когда я использую: overflow-y:scroll
.
Вот мой код:
<div class="modal">
<div class="inner-w">
hello world
<div class="long-box">
</div>
</div>
</div>
.modal {
position: fixed;
bottom: 70px;
top: 0;
left:0;
right: 0;
display: flex;
align-items: center;
padding: 15px;
overflow: scroll;
}
.inner-w {
margin: 50px 0;
width: 100%;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
вот jsfiddle: https://jsfiddle.net/benCarp/bh2Lfpo4/18/#&togetherjs=aKbe8NLJSR