Here is an example to illustrate my question: Example Code
The code provided above is a simplified version of my actual code. I am facing an issue where setting the wrap-div to overflow: visible prevents the menu from being cut off, but it also causes the box shadow not to encompass the box. On the other hand, using overflow:auto; makes the box-shadow work, but the menu gets cut off. How can I find a solution to this problem without specifying a fixed height?
Sample Code:
$('#menu').click(function() {
$('#menu-list').toggleClass('hidden');
});#wrap {
width: 80%;
height: auto;
overflow: visible;
box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}
#content {
width: 200px;
height: 20px;
margin: 0 auto;
}
#content2 {
float: left;
}
.hidden {
display: none;
}
#menu {
position: relative;
height: 20px;
width: 100px;
background-color: #ccc;
float: left;
}
#menu-list {
position: absolute;
top: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div id="content">
Some Content
</div>
<div id="content2">
Some Content
</div>
<div id="menu">
Open Menu
<div id="menu-list" class="hidden">
<div> bla </div>
<div> bla </div>
<div> bla </div>
</div>
</div>
</div>