Check out this interactive example. Here is the HTML code:
<div class="overflow">
<div class="block">
<div class="header">
This is a green header
</div>
<div class="content">
This is a lot of content<br> this is a lot of content<br> this is a lot of content<br> this is a lot of content<br> this is a lot of content<br> this is a lot of content<br>
<button>
add more
</button>
</div>
</div>
</div>
And here is the corresponding CSS code:
.overflow {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.8);
}
.block {
width: 100px;
background: white;
max-width: calc(100% - 30px);
max-height: calc(100% - 30px);
}
.header {
background: green;
flex: 0 0 auto;
}
.content {
min-height: 0;
flex: 1 1 auto;
overflow-y: auto;
}
The issue is that when the content exceeds the modal boundaries, instead of adding a scrollbar to the content, it overflows the .content div.
I attempted to resolve this by using min-height:0;, but it did not solve the problem.