I'm currently working on a fullscreen modal and facing an issue with centering the content vertically when it is smaller than the screen. Additionally, I need the content to start at the top and allow scrolling when its height exceeds the container's height. My approach involves using position:fixed to position the container on the screen and
display:flex; align-items:center;overflow-y:scroll in place, the top part of the inner div gets cut off when the container is shorter than the inner div.
Below is the code snippet:
<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;
}
For further reference, here is a link to the corresponding jsfiddle: https://jsfiddle.net/benCarp/bh2Lfpo4/18/#&togetherjs=aKbe8NLJSR