Javascript 引导选择打开div下的选项

我有一个固定大小的div。假设是50px。里面有一个下拉列表。我使用了引导选择使其可搜索

<div style="height=40px;width:200%; overflow-x:scroll;" id="hugewidth">
  <select id="ss">
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>
  <br/><br/><br/>
</div>

1.
1.
1.
1.
1.

现在的问题是，当我打开下拉列表时，选项位于

hugewidth

div下面。我希望下拉列表在该div上面打开。请参阅可能会清除问题的JSFIDLE

看！！它在滚动条下面。有人能帮我吗？？ 我想让下拉选项div越过滚动条。如果不可能，那么在打开和关闭时，是否有方法根据下拉选项大小调整div高度下拉选项是动态的。

还有一件事。是否可以阻止下拉菜单向上打开？示例：

您可以添加：

data-container="body"

选择元素。或者另一个元素显示下拉列表。请看：

---

文档中的演示：

为什么要给出

overflow-x:scroll因为我需要。这是一个示例代码。实际的web应用程序需要巨大的div，并且能够水平滚动@Durgeshchaudhary真棒兄弟，正是我想要的方式。非常感谢。是的，它成功了。另外，在快速搜索之后，文档中确实提到了这一点。我花了三天时间寻找这个答案