I have made an example of placing a Slim Select dropdown inside of a simple collapsible div: https://codepen.io/wbraswell/pen/gEbdoX
<html>
<head>
<!-- MULTIPLE SELECT DROPDOWNS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.css"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.js"></script>
</head>
<body>
<button class="collapsible">My Collapsible Div</button>
<div class="content" style="z-index: 900;">
<select id="my_MSD" multiple>
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
<option value="value 4">Value 4</option>
<option value="value 5">Value 5</option>
<option value="value 6">Value 6</option>
</select>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
</div>
<button class="collapsible">Another Collapsible Div</button>
<div class="content" style="z-index: 800;">
Howdy<br>
</div>
</body>
</html>
(Please see CodePen.io link above for full HTML & accompanying CSS/Javascript.)
When I uncollapse both sections and expand the Slim Select dropdown, then I can only see the first few Slim Select options "Value 1" through "Value 3". I can not see "Value 4" through "Value 6" unless I click-and-hold the mouse button which is obviously not the desired behavior.
I have tried changing everything I can about the z-index of all components, but without success. I believe this may be caused by Slim Select creating a z-index "stacking context" which I have not figured out yet.
How can I simply see all of "Value 1" through "Value 6" in my example?
Dropdown values are hidden because we set the overflow: hidden to the content div. To see all the values, make the overflow visible for 'content' div preceded by 'active' elements. Add the below CSS along with your code.
.active + .content {
overflow: visible;
}