I created a DropDown menu, I used my real project source code for it so that there should be no confusion:-
.main-container {
overflow-x: auto;
}
div.btn-dropdown-options {
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
position: absolute;
z-index: 1000;
top: calc(100% + 8px);
left: 0;
min-width: 180px;
margin-top: 4px;
overflow: auto;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 8px;
background: #fff;
visibility: hidden;
opacity: 0;
transition: opacity 2s, visibility 2s;
-webkit-box-shadow: 0px 1px 2px rgba(128,138,157,0.12),0px 8px 32px rgba(128,138,157,0.24);
box-shadow: 0px 1px 2px rgba(128,138,157,0.12),0px 8px 32px rgba(128,138,157,0.24);
}
I have a dropdown menu div.btn-dropdown-options and a parent container main-container. When I click on the toggle button to show the dropdown it gets cut off due to overflow property, I have used position: absolute and z-index: 1000;, but nothing is working, how can I show the dropdown menu above the overflow?
full-code :- https://jsfiddle.net/ur5sL4qv/
.main-container {overflow-x: auto; height: 100vh;}
or
div.btn-dropdown-options {position: relative;}
Not sure I fully understand the problem (I suggest using background colors for signaling what's undesireable). But does removing overflow-x from .main-container and adding position: absolute to dropdown options fixes your issue?
.btn-dropdown .btn-dropdown-options {
position: absolute;
right: 0;
}