position absolute in relative hide overflow - html

Question

I'm trying to display a scrollable dropdown in a scrollable div
To manage dropdown, I'm using position:relative on the container and position:absolute
on the content, but if the dropdown content is higher than the container, or start at the end of the scrollable content, it will be displayed below, and maybe hiden by the overflow
example
example
I'm looking for a way to display this dropdown outside/over the parent div, like a native select do.
I have something like this
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+------------------------+
... but I want something like this (thanks for the illustration :) ) :
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+---| the parent. |----+
+---------------+
Here is an example of what I'm trying to do https://codepen.io/spoissonnierAz/pen/LYWOarx
HTML
<div class="parent">
<div class="data">other</div>
<div class="data">
<div id="show1" onclick="$('#dropdown-content1').show();$('#show1').hide();$('#hide1').show()">show</div>
<div id="hide1" onclick="$('#dropdown-content1').hide();$('#show1').show();$('#hide1').hide()">hide</div>
<ul id="dropdown-content1" class="dropdown-content">
<li>data</li>
...
<li>data end</li>
</ul>
</div>
<div class="data">other</div>
...
<div class="data">other</div>
<div class="data">
<div id="show2" onclick="$('#dropdown-content2').show();$('#show2').hide();$('#hide2').show()">show</div>
<div id="hide2" onclick="$('#dropdown-content2').hide();$('#show2').show();$('#hide2').hide()">hide</div>
<ul id="dropdown-content2" class="dropdown-content">
<li>data</li>
...
<li>data</li>
<li>data end</li>
</ul>
</div>
<div class="data">other</div>
<div class="data">
<select>
<option>data</option>
....
<option>data</option>
<option>data end</option>
</select>
</div>
<div class="data">other</div>
</div>
CSS
.parent {
overflow: auto;
}
.data {
position:relative;
}
.dropdown-content {
display: none;
position: absolute;
height:100px;
overflow: auto;
z-index:50;
}
.dropdown-content > li {
display: block;
}
#hide1,#hide2 {
display: none
}
Thanks

Answer 1

I am assuming you have this...
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+------------------------+
... but you want this:
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+---| the parent. |----+
+---------------+
You can position the container with additional information using .position() and .offset() or use .css() directly, which ever works for you.
See stackoverflow search results for "jquery position element relative to another" or similar.
One example here: How to position one element relative to another with jQuery
jQuery offset
jQuery position
jQuery css