I am facing an issue with a dropdown menu inside a parent div. The parent div has a fixed height and is set to overflow: auto. My goal is to have the menu extend beyond the boundaries of the parent when opened, but currently it just increases the height of the parent.
You can view a minimal test case on CodePen, or refer to the code below:
HTML
<div class="parent">
<div class="dropdown">
<button id="btn" class="btn" type="button">Click me</button>
<div id="menu" class="menu">I should protrude outside the parent, but instead I trigger scrolling within the parent</div>
</div>
</div>
SCSS
.parent {
height: 3rem;
padding: 0.25rem;
background-color: #f5f5f5;
overflow: auto;
text-align: center
}
.btn {
font-size: 1.2rem;
}
.dropdown {
display: inline-block;
position: relative;
}
.menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: white;
border: 1px solid #eee;
padding: 0.5rem;
&.show {
display: block;
}
}
(The JavaScript simply toggles the show class on the dropdown and is not relevant to this issue.)
I have tried wrapping the dropdown in another div and experimenting with various overflow values on both the dropdown and parent elements without success. I prefer not to resort to moving the menu outside of the parent and positioning it through JavaScript, as I believe there must be a CSS solution available.
If anyone has any insights or solutions to this problem, they would be greatly appreciated!
*Note that it is crucial for the dropdown to remain in the normal document flow, as multiple instances may appear one after the other within the parent div.