In my HTML code, I have the following elements:
.modal- represents a page modal with a height limit of30vh..wrapper- serves as a container that wraps the modal content, consisting of an input (in this case, a search input) and a list of items..list- contains a list of elements that are wider than30vh.
The desired behavior is for the wrapper to be filled by the input field, with the remaining space filled by the list. If the number of items in the list exceeds the available space, a scroll should be applied.
I encountered an issue where the list (and .wrapper) overflows the page unless I set display: flex on .modal.
Could someone please explain why this happens? Why does the .wrapper overflow its parent even though it has overflow: hidden and max-height: 100% which equals 30vh of the parent until .modal has display: flex?
.modal {
background-color: red;
padding: 3rem;
flex-direction: column;
gap: 1rem;
max-height: 30vh;
}
.item {
height: 30px;
background-color: green;
}
.wrapper {
max-height: 100%;
display: flex;
flex-direction: column;
background-color: orange;
overflow: hidden;
}
.list {
display: flex;
flex: 1;
flex-direction: column;
gap: 1rem;
overflow: scroll;
}<div class="modal">
<div class="wrapper">
<input />
<div class="list">
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
<div class="item">
sds
</div>
</div>
</div>
</div>