How to ensure that only one nested element must overflow with its parent

Question

I am using a multiple choice jquery plugin for a select element. The outer div (containing the multiple select box) has a maximum height. If I open the multiple selection window, it will turn off and I need to scroll down to view all the options:

$('select').multipleSelect();

#outer {
  max-height: 110px;
  overflow: auto;
  background-color: green;
  color: white;
}
#select {
  width: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<div id="outer">
  <p>
    Below you find a multiple select box that should overflow the outer div.
  </p>
  <label for="select">Multiple select:</label>
  <select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
  <p>
    Scroll to the button when the select box is open.
  </p>
  <button>
    Do nothing
  </button>
</div>

Run codeHide result

Jsfiddle

If I open the multiple selection window, all options should be visible. Thus, the parameters must be overflowed with an external div. How can I achieve this?

If I set the position div.ms-parentto fixed, I get the desired behavior until I scroll down, because the selection field is fixed and does not move with other content.

Usage z-indexalso does not work in this case.

Answer 1

oldschool JQ ( multipleselect())

. > jsfiddle

:

$('select').multipleSelect();
var sTop = $('.ms-parent ').offset().top,
sHeight = $('.ms-parent ').height()
$('.ms-drop.bottom').css('top',sTop+sHeight)

CSS

.ms-drop {
  position:fixed;
  width:200px;
}

.ms-drop, , position:fixed. JQ top, offset().top of .ms-parent . 2 top .ms-drop

, .

EDIT: jsFiddle

, ms-drop , div (#outer), , top ms-drop,

JQ:

$('select').multipleSelect();
var sTop = $('.ms-parent ').offset().top,
    sHeight = $('.ms-parent ').height()

$('.ms-drop.bottom').css('top',sTop+sHeight)
$("#outer").on("scroll",function(){
    var oScroll = $(this).scrollTop()
    $('.ms-drop.bottom').css('top',sTop+sHeight-oScroll)

})

Answer 2

container . :

$('select').multipleSelect({
   container: "body",
});

https://jsfiddle.net/8mdxuz1w/1/

.