I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content.
Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully visible.
I'm aiming to make the dialog responsive in height, while keeping the header and footer sticky, with the content section scrolling smoothly.
Can anyone point out what might be going wrong here?
.modal {
width: 500px;
display: flex;
text-align: left;
flex-direction: column;
}
.header {
height: 204px;
}
.content {
top: 204px;
bottom: 72px;
overflow-y: auto;
}
.footer {
height: 72px;
flex-shrink: 0;
overflow: hidden;
}
<div class="modal">
<div class="header">
Header Content
</div>
<div class="content">
Content Section
</div>
<div class="footer">
Footer Section
</div>
</div>