Css 选择了弹出元素/JQuery时出现溢出问题

我正在表单上使用JQuery选择的插件。当选项下拉时，它会创建一个垂直滚动条

我相信我理解为什么会这样：我正在使容器漂浮，并使用容器上的溢出物清除漂浮物，而这似乎是罪魁祸首。然而，浮动和清除对于我的实际布局来说是至关重要的，所以我不能仅仅将它们取出以适应所选的插件

这里有一个快速的JS提琴来说明这个问题。我对如何解决这个问题感到非常困惑，所以提前感谢您的建议

CSS:

HTML:

方案A
方案B
备选案文C

您应该将div元素的高度设置为足够大。为此，您必须设置该div元素的所有父元素的高度。

通过将清除浮动的方法从使用溢出更改为在容器上使用clearfix，实现了这一点：

---

我最初发布了错误的JS小提琴。。。很抱歉我不得不把它交给一个新的。请检查新链接。原来的帖子更新了。这不是我想要的解决方案。下拉选项应该位于布局之外，而不会导致溢出。

.container {
    background: #ccc;
    width: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.main {
    float: left;
    width: 100%;
}
.select-chosen {
    display: block;
    width: 100%;
}

<div class="container">
    <div class="main">
        <br />
        <div>
            <select class="select-chosen" multiple>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
            </select>
        </div>
        <br />
        <br />
    </div>
</div>

.container {
    background: #ccc;
    width: 400px;
}
.main {
    float: left;
    width: 100%;
}
.select-chosen {
    display: block;
    width: 100%;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}