我试图在一个溢出的div中添加多个选择：滚动

Question

$("select").multipleSelect({
           
            
            });

.scroll {
    background-color: #00FFFF;    
    overflow-x:scroll ;
    width:300px;
    padding: 10px;
    border: 1px solid black;
    float: left;
    min-height: 300px;
    margin: 0 20px 0 0;
}
.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    float: left;
    margin: 0 20px 0 0;
}

div.hidden {
    background-color: #00FF00;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.ms-parent {
position: static
}

.ms-drop {
    width: 200px;
}

.ms-drop.bottom {
    top: inherit;
}

.ms-choice > span {
    position: static;
    }
    
    .ms-choice > div {
    position: relative;
    top: -26px;
    right: -62px;
    }

<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.<img src="https://placehold.it/465x100">
<div class="test">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<BR>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>

我正在尝试在有溢出的div中添加多个select：滚动但是下拉是在div之外它必须出现在div之外。你能否告诉我如何解决这个问题。